0.10.2-9 Layout

frontend/src/styles/app.css

@@ -419,54 +419,62 @@ body {
 
 .hardware-cpu-summary {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.45rem;
-  align-items: stretch;
+  flex-wrap: nowrap;
+  gap: 0.35rem;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .hardware-cpu-chip {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.28rem;
   border: 1px solid var(--rip-border);
   border-radius: 999px;
   background: var(--rip-panel);
-  padding: 0.22rem 0.55rem;
-  font-size: 0.8rem;
+  padding: 0.18rem 0.42rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  min-height: 2rem;
-  height: 2rem;
   white-space: nowrap;
+  min-width: 0;
+  flex-shrink: 1;
 }
 
 .hardware-cpu-chip span {
   line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .hardware-cpu-chip .pi {
-  font-size: 0.82rem;
+  font-size: 0.75rem;
   color: var(--rip-brown-700);
+  flex-shrink: 0;
 }
 
 .hardware-cpu-load-group {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.2rem;
+  min-width: 0;
+  flex-shrink: 1;
 }
 
 .hardware-cpu-core-toggle-btn {
   border: 1px solid var(--rip-border);
   background: var(--rip-panel);
   color: var(--rip-brown-700);
-  width: 2rem;
-  min-width: 2rem;
-  height: 2rem;
+  width: 1.6rem;
+  min-width: 1.6rem;
+  height: 1.6rem;
   border-radius: 999px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding: 0;
+  flex-shrink: 0;
 }
 
 .hardware-cpu-core-toggle-btn:hover {
@@ -507,12 +515,13 @@ body {
 }
 
 .hardware-core-item.compact {
-  grid-template-columns: auto auto auto;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: start;
-  gap: 0.35rem;
+  gap: 0.2rem 0.3rem;
   padding: 0.3rem 0.45rem;
   text-align: left;
+  overflow: hidden;
 }
 
 .hardware-core-title {
@@ -1112,6 +1121,21 @@ body {
   white-space: normal;
 }
 
+.p-fileupload-buttonbar {
+  padding: 0.4rem 0.6rem !important;
+  gap: 0.35rem !important;
+}
+
+.p-fileupload-buttonbar .p-button.p-button-icon-only {
+  width: 2rem !important;
+  height: 2rem !important;
+  padding: 0 !important;
+}
+
+.p-fileupload-buttonbar .p-button.p-button-icon-only .p-button-icon {
+  font-size: 0.85rem !important;
+}
+
 .aax-drop-zone {
   display: flex;
   flex-direction: column;
@@ -1507,7 +1531,7 @@ body {
 
 .settings-grid {
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .settings-tabview {
@@ -1528,7 +1552,7 @@ body {
 
 .settings-sections {
   display: grid;
-  gap: 0.85rem;
+  gap: 0.6rem;
 }
 
 .settings-section.grouped {
@@ -1556,8 +1580,8 @@ body {
 
 .setting-row {
   display: grid;
-  gap: 0.35rem;
-  padding: 0.75rem;
+  gap: 0.25rem;
+  padding: 0.45rem 0.6rem;
   border: 1px solid var(--rip-border);
   border-radius: 0.5rem;
   background: var(--rip-panel-soft);
@@ -1569,6 +1593,9 @@ body {
 
 .setting-description {
   white-space: pre-wrap;
+  font-size: 0.78rem;
+  color: var(--rip-muted);
+  line-height: 1.35;
 }
 
 .notification-toggle-grid {
@@ -2075,6 +2102,8 @@ body {
 .history-dataview .p-dataview-content .p-grid.grid > .xl-col-4 {
   width: 100%;
   padding: 0.35rem;
+  display: flex;
+  flex-direction: column;
 }
 
 @media (min-width: 900px) {
@@ -2094,6 +2123,9 @@ body {
   border-radius: 0.55rem;
   background: var(--rip-panel-soft);
   box-shadow: 0 2px 7px rgba(58, 29, 18, 0.06);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .history-dv-item:focus-visible {
@@ -2230,13 +2262,28 @@ body {
   gap: 0.5rem;
   padding: 0.65rem;
   grid-template-rows: auto 1fr auto;
+  flex: 1;
 }
 
 .history-dv-grid-poster-wrap {
+  position: relative;
   width: min(120px, 100%);
   margin: 0 auto;
 }
 
+.history-dv-grid-status-overlay {
+  position: absolute;
+  top: 0.4rem;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.history-dv-grid-status-overlay .p-tag {
+  pointer-events: auto;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
+}
+
 .history-dv-grid-main {
   display: grid;
   gap: 0.35rem;