Update src/App.scss

src/App.scss

@@ -1,5 +1,3 @@
-// src/App.scss
-
 // 1. Import Tailwind's base, components, and utilities
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
@@ -32,7 +30,7 @@
     }
     body {
         @apply bg-background text-foreground;
-        overflow-x: hidden;
+        overflow-x: hidden; // Ensures no horizontal scroll on body
         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;
@@ -48,8 +46,8 @@
     left: 50%;
     transform: translateX(-50%);
     z-index: 100;
-    width: calc(100% - 2rem);
-    max-width: 28rem;
+    width: calc(100% - 2rem); // Takes full width minus some margin
+    max-width: 28rem; // Max width for larger screens
     display: flex;
     justify-content: center;
     pointer-events: none;
@@ -65,12 +63,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; // <--- Corrected: no quotes
+    opacity: 0; 
     transform: translateY(-100%) scale(0.9);
     pointer-events: none;
 
     &.open {
-        opacity: 1; // <--- Corrected: no quotes
+        opacity: 1; 
         transform: translateY(0) scale(1);
         pointer-events: auto;
     }
@@ -93,14 +91,14 @@
 /* Header controls */
 .header-controls {
     display: flex;
-    padding: 1rem;
+    padding: 1rem; // Sufficient padding for touch targets
     justify-content: space-between;
     align-items: center;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 10;
+    z-index: 10; // Above media content
 }
 
 .header-button {
@@ -108,18 +106,18 @@
     align-items: center;
     justify-content: center;
     padding: 0.5rem;
-    border-radius: var(--radius-lg, 0.625rem);
-    background-color: #e5e7eb;
+    border-radius: var(--radius-lg, 0.625rem); // Corrected from var(--radius-lg, 0.625rem)
+    background-color: #e5e7eb; // Tailwind gray-200
     cursor: pointer;
     transition: background-color 0.2s;
 
     &:hover {
-        background-color: #d1d5db;
+        background-color: #d1d5db; // Tailwind gray-300
     }
 
     svg {
-        opacity: 0.7; // <--- Corrected: no quotes
-        stroke: #374151;
+        opacity: 0.7; 
+        stroke: #374151; // Tailwind gray-700
     }
 }
 
@@ -129,7 +127,7 @@
         background-color: oklch(0.35 0 0);
     }
     svg {
-        opacity: 0.8; // <--- Corrected: no quotes
+        opacity: 0.8; 
         stroke: oklch(0.85 0 0);
     }
 }
@@ -138,24 +136,25 @@
 .footer-controls {
     width: 100%;
     display: flex;
-    gap: 1rem;
+    gap: 1rem; // Space between control items
     position: absolute;
     bottom: 0;
-    padding: 2rem 3rem;
+    // *** MODIFIED: Reduced padding for better mobile fit ***
+    padding: 1.5rem 1rem; // 24px top/bottom, 16px left/right
     align-items: center;
 
     &.layout-default {
-        justify-content: space-between;
+        justify-content: space-between; // For mic and cam buttons
     }
     &.layout-with-small-logo {
-        justify-content: space-around;
+        justify-content: space-around; // For mic, logo, and cam buttons
     }
 }
 
 .control-button {
-    height: 80px;
+    height: 80px; // Keeping original size, should fit with new padding
     width: 80px;
-    border-radius: 9999px;
+    border-radius: 9999px; // Circular
     padding: 0;
     display: flex;
     align-items: center;
@@ -172,26 +171,26 @@
     }
 }
 
-.cam-button-color { background-color: #E0ECFF; }
-.mic-button-color { background-color: #fecdd3; }
+.cam-button-color { background-color: #E0ECFF; } // Light blueish
+.mic-button-color { background-color: #fecdd3; } // Light redish
 
-.dark .cam-button-color { background-color: #223355; }
-.dark .mic-button-color { background-color: #5C2129; }
+.dark .cam-button-color { background-color: #223355; } // Dark blueish
+.dark .mic-button-color { background-color: #5C2129; } // Dark redish
 
 /* Switch Camera Button */
 .switch-camera-button-container {
     position: absolute;
-    bottom: calc(100% + 0.65rem);
+    bottom: calc(100% + 0.65rem); // Positioned above the camera button
     left: 50%;
-    z-index: 5;
-    opacity: 0; // <--- Corrected: no quotes
+    z-index: 5; // Below header controls but above other footer elements if overlap
+    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; // <--- Corrected: no quotes
+        opacity: 1; 
         transform: translateY(0) scale(1) translateX(-50%);
         pointer-events: auto;
     }
@@ -202,7 +201,7 @@
     height: 48px;
     background-color: var(--background);
     border: 1px solid var(--border);
-    border-radius: 9999px;
+    border-radius: 9999px; // Circular
     display: flex;
     align-items: center;
     justify-content: center;
@@ -220,7 +219,7 @@
     }
 
     svg {
-        width: 22px;
+        width: 22px; // SVG size is fixed here
         height: 22px;
         stroke: var(--foreground);
         transition: transform 0.3s ease-in-out;
@@ -231,28 +230,27 @@
 }
 
 /* Keyframes for popover */
-// Corrected: percentages and opacity values are not quoted
 @keyframes popover-drop-in {
-    0% { // <--- Corrected
+    0% { 
         opacity: 0;
         transform: translateY(-100%) scale(0.9);
     }
-    70% { // <--- Corrected
+    70% { 
         opacity: 1;
         transform: translateY(5px) scale(1.02); /* Slight overshoot */
     }
-    100% { // <--- Corrected
+    100% { 
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }
 
 @keyframes popover-lift-out {
-    0% { // <--- Corrected
+    0% { 
         opacity: 1;
         transform: translateY(0) scale(1);
     }
-    100% { // <--- Corrected
+    100% { 
         opacity: 0;
         transform: translateY(-100%) scale(0.9);
     }
@@ -264,9 +262,4 @@
 }
 .animate-popover-close-top-center {
     animation: popover-lift-out 0.3s ease-in forwards;
-}
-
-// Utility overrides are generally not needed if Tailwind is configured correctly.
-// These were previously commented out and can remain so.
-// .bg-blue-200 { background-color: #bfdbfe !important; }
-// ...
+}