Update src/App.scss

src/App.scss

@@ -27,21 +27,21 @@
     * {
         border-color: var(--border);
         outline-color: var(--foreground);
-        box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
+        box-sizing: border-box;
     }
     body {
         @apply bg-background text-foreground;
-        overflow-x: hidden; // Prevents horizontal scroll on the body itself
+        overflow-x: hidden;
         font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        margin: 0; /* Ensure no default margin on body */
-        padding: 0; /* Ensure no default padding on body */
+        margin: 0;
+        padding: 0;
     }
     html {
         margin: 0;
         padding: 0;
-        overflow-x: hidden; /* Also apply to html for good measure in iframes */
+        overflow-x: hidden;
     }
 }
 
@@ -54,7 +54,7 @@
     left: 50%;
     transform: translateX(-50%);
     z-index: 100;
-    width: calc(100% - 1rem); /* Reduced side margin for very small screens */
+    width: calc(100% - 1rem);
     max-width: 28rem;
     display: flex;
     justify-content: center;
@@ -99,8 +99,7 @@
 /* Header controls */
 .header-controls {
     display: flex;
-    /* *** MODIFIED: Reduced horizontal padding significantly *** */
-    padding: 0.75rem 0.5rem; /* 12px top/bottom, 8px left/right */
+    padding: 0.75rem 0.5rem; // 12px top/bottom, 8px left/right
     justify-content: space-between;
     align-items: center;
     width: 100%;
@@ -108,26 +107,34 @@
     top: 0;
     left: 0;
     z-index: 10;
-    /* box-sizing: border-box; // Already set globally for * */
 }
 
 .header-button {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem; /* 8px padding */
-    border-radius: var(--radius-lg, 0.625rem);
-    background-color: #e5e7eb;
+    padding: 0.5rem; // 8px padding around the SVG icon
+    width: 40px;  // Explicit width for consistent size
+    height: 40px; // Explicit height for consistent size
+    border-radius: var(--radius-lg, 0.625rem); // 10px, or var(--radius) for consistency
+    background-color: #e5e7eb; // Tailwind gray-200
     cursor: pointer;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s, transform 0.1s ease-out; // For hover and active states
+
+    svg {
+        opacity: 0.7;
+        stroke: #374151; // Tailwind gray-700
+        width: 24px;   // Ensure SVGs inside are of consistent visual weight
+        height: 24px;
+    }
 
     &:hover {
-        background-color: #d1d5db;
+        background-color: #d1d5db; // Tailwind gray-300
     }
 
-    svg {
-        opacity: 0.7;
-        stroke: #374151;
+    &:active {
+        background-color: #9ca3af; // Tailwind gray-400 (or a bit darker like gray-500: #6b7280)
+        transform: scale(0.95); // Click feedback: button scales down
     }
 }
 
@@ -136,24 +143,26 @@
     &:hover {
         background-color: oklch(0.35 0 0);
     }
+    &:active {
+        background-color: oklch(0.40 0 0); // Darker shade for active state in dark mode
+        transform: scale(0.95);
+    }
     svg {
         opacity: 0.8;
         stroke: oklch(0.85 0 0);
     }
 }
 
+
 /* Footer and Control Buttons */
 .footer-controls {
     width: 100%;
     display: flex;
-    /* *** MODIFIED: Reduced gap and horizontal padding significantly *** */
-    gap: 0.5rem; /* 8px gap between buttons */
+    gap: 0.5rem; // 8px gap
     position: absolute;
     bottom: 0;
-    /* Reduced top/bottom padding slightly, horizontal padding significantly */
-    padding: 0.75rem 0.5rem; /* 12px top/bottom, 8px left/right */
+    padding: 0.75rem 0.5rem; // 12px top/bottom, 8px left/right
     align-items: center;
-    /* box-sizing: border-box; // Already set globally for * */
 
     &.layout-default {
         justify-content: space-between;
@@ -164,8 +173,8 @@
 }
 
 .control-button {
-    height: 70px; /* Slightly reduced size */
-    width: 70px;  /* Slightly reduced size */
+    height: 70px;
+    width: 70px;
     border-radius: 9999px;
     padding: 0;
     display: flex;
@@ -176,8 +185,7 @@
     box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
     cursor: pointer;
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
-    flex-shrink: 0; /* Prevent buttons from shrinking if space is tight in a way that breaks layout */
-
+    flex-shrink: 0;
 
     &:hover {
         transform: scale(1.05);
@@ -194,7 +202,7 @@
 /* Switch Camera Button */
 .switch-camera-button-container {
     position: absolute;
-    bottom: calc(100% + 0.5rem); /* Adjusted spacing slightly */
+    bottom: calc(100% + 0.5rem);
     left: 50%;
     z-index: 5;
     opacity: 0;
@@ -211,8 +219,8 @@
 }
 
 .switch-camera-button-content {
-    width: 44px;  /* Slightly reduced size */
-    height: 44px; /* Slightly reduced size */
+    width: 44px;
+    height: 44px;
     background-color: var(--background);
     border: 1px solid var(--border);
     border-radius: 9999px;
@@ -233,8 +241,8 @@
     }
 
     svg {
-        width: 20px;  /* Slightly reduced size */
-        height: 20px; /* Slightly reduced size */
+        width: 20px;
+        height: 20px;
         stroke: var(--foreground);
         transition: transform 0.3s ease-in-out;
     }
@@ -251,7 +259,7 @@
     }
     70% {
         opacity: 1;
-        transform: translateY(5px) scale(1.02);
+        transform: translateY(5px) scale(1.02); /* Slight overshoot */
     }
     100% {
         opacity: 1;