refactor(samples): simplify calc-01 topbar layout and remove debug labels

samples/calc-01/index.css

@@ -151,15 +151,6 @@ body {
 
 .topbar {
   margin-top: 14px;
-  display: grid;
-  grid-template-columns: minmax(120px, 148px) minmax(132px, 160px) 1fr minmax(72px, 88px) minmax(108px, 128px) minmax(72px, 88px);
-  gap: 10px;
-  align-items: stretch;
-}
-
-.topbar-cell,
-.topbar-status {
-  min-height: 70px;
   background: rgba(6, 10, 16, 0.18);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 16px;
@@ -167,38 +158,26 @@ body {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
+.topbar-group {
+  display: grid;
+  grid-template-columns: minmax(110px, 132px) minmax(110px, 132px) 1fr minmax(72px, 88px) minmax(108px, 128px) minmax(72px, 88px);
+  gap: 10px;
+  align-items: stretch;
+}
+
 .menu-cell {
   position: relative;
 }
 
-.topbar-label {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 11px;
-  color: #d9e1ec;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-}
-
-.status {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  color: #edf2fa;
-  font-size: 12px;
-  align-content: center;
-}
-
-.pill {
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 999px;
-  padding: 6px 10px;
-  background: rgba(255, 255, 255, 0.06);
+.topbar-spacer {
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.04);
 }
 
 .menu-trigger {
   width: 100%;
-  min-height: 38px;
+  min-height: 50px;
 }
 
 .popup-menu {
@@ -240,11 +219,11 @@ body {
 
 .action-cell > button {
   width: 100%;
+  min-height: 50px;
 }
 
-.topbar-status {
-  display: flex;
-  align-items: center;
+.wide-action {
+  min-width: 0;
 }
 
 select,
@@ -365,9 +344,13 @@ button:active {
 }
 
 @media (max-width: 980px) {
-  .topbar {
+  .topbar-group {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .topbar-spacer {
+    display: none;
+  }
 }
 
 @media (max-width: 860px) {
@@ -391,7 +374,7 @@ button:active {
     align-items: flex-start;
   }
 
-  .topbar {
+  .topbar-group {
     grid-template-columns: 1fr;
   }