From fbbc9455fb48678bfc2eaf3b052ff0a7ab02f25a Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 25 Apr 2026 04:06:45 +0200
Subject: [PATCH] fix: improve calc topbar responsiveness on smaller screens

---
 samples/calc-01/index.css | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/samples/calc-01/index.css b/samples/calc-01/index.css
index f5bc168..7258c51 100644
--- a/samples/calc-01/index.css
+++ b/samples/calc-01/index.css
@@ -358,11 +358,7 @@ button:active {
 
 @media (max-width: 980px) {
   .topbar-group {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .topbar-spacer {
-    display: none;
+    grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(60px, 72px) minmax(60px, 72px);
   }
 }
 
@@ -385,8 +381,13 @@ button:active {
     border-radius: 22px;
   }
 
+  .topbar {
+    overflow-x: auto;
+  }
+
   .topbar-group {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(60px, 72px) minmax(60px, 72px);
+    min-width: 520px;
   }
 
   .functions-grid,