Update src/App.scss

src/App.scss

@@ -26,14 +26,22 @@
 @layer base {
     * {
         border-color: var(--border);
-        outline-color: var(--foreground); 
+        outline-color: var(--foreground);
+        box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
     }
     body {
         @apply bg-background text-foreground;
-        overflow-x: hidden; // Ensures no horizontal scroll on body
+        overflow-x: hidden; // Prevents horizontal scroll on the body itself
         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 */
+    }
+    html {
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden; /* Also apply to html for good measure in iframes */
     }
 }
 
@@ -46,8 +54,8 @@
     left: 50%;
     transform: translateX(-50%);
     z-index: 100;
-    width: calc(100% - 2rem); // Takes full width minus some margin
-    max-width: 28rem; // Max width for larger screens
+    width: calc(100% - 1rem); /* Reduced side margin for very small screens */
+    max-width: 28rem;
     display: flex;
     justify-content: center;
     pointer-events: none;
@@ -63,12 +71,12 @@
     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     outline: none;
     transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    opacity: 0; 
+    opacity: 0;
     transform: translateY(-100%) scale(0.9);
     pointer-events: none;
 
     &.open {
-        opacity: 1; 
+        opacity: 1;
         transform: translateY(0) scale(1);
         pointer-events: auto;
     }
@@ -91,33 +99,35 @@
 /* Header controls */
 .header-controls {
     display: flex;
-    padding: 1rem; // Sufficient padding for touch targets
+    /* *** MODIFIED: Reduced horizontal padding significantly *** */
+    padding: 0.75rem 0.5rem; /* 12px top/bottom, 8px left/right */
     justify-content: space-between;
     align-items: center;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 10; // Above media content
+    z-index: 10;
+    /* box-sizing: border-box; // Already set globally for * */
 }
 
 .header-button {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem;
-    border-radius: var(--radius-lg, 0.625rem); // Corrected from var(--radius-lg, 0.625rem)
-    background-color: #e5e7eb; // Tailwind gray-200
+    padding: 0.5rem; /* 8px padding */
+    border-radius: var(--radius-lg, 0.625rem);
+    background-color: #e5e7eb;
     cursor: pointer;
     transition: background-color 0.2s;
 
     &:hover {
-        background-color: #d1d5db; // Tailwind gray-300
+        background-color: #d1d5db;
     }
 
     svg {
-        opacity: 0.7; 
-        stroke: #374151; // Tailwind gray-700
+        opacity: 0.7;
+        stroke: #374151;
     }
 }
 
@@ -127,7 +137,7 @@
         background-color: oklch(0.35 0 0);
     }
     svg {
-        opacity: 0.8; 
+        opacity: 0.8;
         stroke: oklch(0.85 0 0);
     }
 }
@@ -136,25 +146,27 @@
 .footer-controls {
     width: 100%;
     display: flex;
-    gap: 1rem; // Space between control items
+    /* *** MODIFIED: Reduced gap and horizontal padding significantly *** */
+    gap: 0.5rem; /* 8px gap between buttons */
     position: absolute;
     bottom: 0;
-    // *** MODIFIED: Reduced padding for better mobile fit ***
-    padding: 1.5rem 1rem; // 24px top/bottom, 16px left/right
+    /* Reduced top/bottom padding slightly, horizontal padding significantly */
+    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; // For mic and cam buttons
+        justify-content: space-between;
     }
     &.layout-with-small-logo {
-        justify-content: space-around; // For mic, logo, and cam buttons
+        justify-content: space-around;
     }
 }
 
 .control-button {
-    height: 80px; // Keeping original size, should fit with new padding
-    width: 80px;
-    border-radius: 9999px; // Circular
+    height: 70px; /* Slightly reduced size */
+    width: 70px;  /* Slightly reduced size */
+    border-radius: 9999px;
     padding: 0;
     display: flex;
     align-items: center;
@@ -164,6 +176,8 @@
     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 */
+
 
     &:hover {
         transform: scale(1.05);
@@ -171,37 +185,37 @@
     }
 }
 
-.cam-button-color { background-color: #E0ECFF; } // Light blueish
-.mic-button-color { background-color: #fecdd3; } // Light redish
+.cam-button-color { background-color: #E0ECFF; }
+.mic-button-color { background-color: #fecdd3; }
 
-.dark .cam-button-color { background-color: #223355; } // Dark blueish
-.dark .mic-button-color { background-color: #5C2129; } // Dark redish
+.dark .cam-button-color { background-color: #223355; }
+.dark .mic-button-color { background-color: #5C2129; }
 
 /* Switch Camera Button */
 .switch-camera-button-container {
     position: absolute;
-    bottom: calc(100% + 0.65rem); // Positioned above the camera button
+    bottom: calc(100% + 0.5rem); /* Adjusted spacing slightly */
     left: 50%;
-    z-index: 5; // Below header controls but above other footer elements if overlap
-    opacity: 0; 
+    z-index: 5;
+    opacity: 0;
     transform: translateY(15px) scale(0.7) translateX(-50%);
     pointer-events: none;
     transition: opacity 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
     transform-origin: center bottom;
 
     &.visible {
-        opacity: 1; 
+        opacity: 1;
         transform: translateY(0) scale(1) translateX(-50%);
         pointer-events: auto;
     }
 }
 
 .switch-camera-button-content {
-    width: 48px;
-    height: 48px;
+    width: 44px;  /* Slightly reduced size */
+    height: 44px; /* Slightly reduced size */
     background-color: var(--background);
     border: 1px solid var(--border);
-    border-radius: 9999px; // Circular
+    border-radius: 9999px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -219,8 +233,8 @@
     }
 
     svg {
-        width: 22px; // SVG size is fixed here
-        height: 22px;
+        width: 20px;  /* Slightly reduced size */
+        height: 20px; /* Slightly reduced size */
         stroke: var(--foreground);
         transition: transform 0.3s ease-in-out;
     }
@@ -231,26 +245,26 @@
 
 /* Keyframes for popover */
 @keyframes popover-drop-in {
-    0% { 
+    0% {
         opacity: 0;
         transform: translateY(-100%) scale(0.9);
     }
-    70% { 
+    70% {
         opacity: 1;
-        transform: translateY(5px) scale(1.02); /* Slight overshoot */
+        transform: translateY(5px) scale(1.02);
     }
-    100% { 
+    100% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }
 
 @keyframes popover-lift-out {
-    0% { 
+    0% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
-    100% { 
+    100% {
         opacity: 0;
         transform: translateY(-100%) scale(0.9);
     }