Improve calculator progress tracking and responsive layout

website/src/styles/_responsive.scss

@@ -309,7 +309,6 @@
     grid-template-columns: 1fr;
   }
 
-  .calculator-module,
   .timer-module {
     grid-template-columns: 1fr;
   }

website/src/styles/toolboxes/_calculator-results.scss

@@ -7,6 +7,7 @@
 
 .calculator-form label,
 .calculator-field,
+.calculator-current-field,
 .calculator-result {
   display: grid;
   width: 100%;
@@ -21,6 +22,29 @@
   max-width: 100%;
 }
 
+.calculator-expression-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 34px;
+  min-width: 0;
+  align-items: center;
+  gap: 7px;
+}
+
+.calculator-expression-row.has-current,
+.calculator-current-field {
+  grid-template-columns: 48px minmax(0, 1fr) 34px;
+}
+
+.calculator-current-toggle > span {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.calculator-current-field {
+  align-items: center;
+}
+
 .calculator-entry.has-drag-handle {
   grid-template-columns: 30px minmax(0, 1fr) 34px 34px;
 }
@@ -87,6 +111,8 @@
 
 .calculator-form label span,
 .calculator-field > span,
+.calculator-total-label,
+.calculator-current-field > span,
 .calculator-result span,
 .tool-split-root-button {
   color: var(--color-text-secondary);

website/src/styles/toolboxes/_calculator.scss

@@ -19,6 +19,62 @@
   min-height: 0;
 }
 
+.module[data-module-type="calculator"] {
+  container-name: calculator-tool;
+  container-type: inline-size;
+}
+
+@container calculator-tool (max-width: 820px) {
+  .calculator-module {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .calculator-card {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .calculator-field {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .calculator-current-field {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  .calculator-result {
+    grid-column: 2;
+    grid-row: 1 / 3;
+  }
+
+  .calculator-label-field,
+  .calculator-save-button {
+    grid-column: 1 / -1;
+  }
+}
+
+@container calculator-tool (max-width: 560px) {
+  .calculator-card {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .calculator-field,
+  .calculator-current-field,
+  .calculator-result,
+  .calculator-label-field,
+  .calculator-save-button {
+    grid-column: 1;
+    grid-row: auto;
+  }
+}
+
+@supports not (container-type: inline-size) {
+  .calculator-module {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 .calculator-card,
 .tool-split-results,
 .timer-control-card,

website/src/styles/toolboxes/shared-controls/_mix-tags.scss

@@ -6,7 +6,7 @@
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  min-height: 44px;
+  min-height: 36px;
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
@@ -29,18 +29,18 @@
   width: 100%;
   min-width: 0;
   max-width: 100%;
-  height: 42px;
-  min-height: 42px;
+  height: 36px;
+  min-height: 36px;
   overflow-x: auto;
   overflow-y: hidden;
-  padding: 10px 4px 4px 7px;
+  padding: 7px 4px 4px 7px;
   border: 0;
   background: transparent;
   color: inherit;
   caret-color: var(--color-text-primary);
   font: inherit;
   font-variant-numeric: tabular-nums;
-  line-height: 20px;
+  line-height: 21px;
   outline: none;
   scrollbar-width: none;
   white-space: nowrap;