style: implement Floating Sheet design and perform total cleanup of legacy paddings

Author: realtomchuk-source

web/src/components/ui/BottomSheet/BottomSheet.module.css

@@ -12,6 +12,7 @@
     display: flex;
     justify-content: center;
     align-items: flex-end;
+    padding: 12px;
 }
 
 .backdropVisible {
@@ -23,9 +24,9 @@
     background: #ffffff;
     width: 100%;
     max-width: 480px;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    padding: 16px 20px calc(16px + var(--nav-bottom-buffer)) 20px;
+    border-radius: 24px;
+    margin-bottom: var(--nav-bottom-buffer);
+    padding: 16px 20px 24px 20px;
     box-sizing: border-box;
     transform: translateY(100%);
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);

web/src/pages/Cabinet/components/AboutSheet.module.css

@@ -1,6 +1,6 @@
 .container {
     text-align: center;
-    padding: 32px 16px 120px;
+    padding: 32px 16px 24px;
 }
 
 .logoBoxWrap {

web/src/pages/Cabinet/components/AuthPromptSheet.tsx

@@ -11,7 +11,7 @@ interface AuthPromptSheetProps {
 export const AuthPromptSheet: React.FC<AuthPromptSheetProps> = ({ isOpen, onClose, onLogin }) => {
     return (
         <BottomSheet isOpen={isOpen} onClose={onClose} title="Потрібна реєстрація">
-            <div style={{ textAlign: 'center', padding: '8px 16px 100px' }}>
+            <div style={{ textAlign: 'center', padding: '8px 16px 32px' }}>
 
                 {/* Branded Identity - Glass Hero Icon */}
                 <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'center' }}>

web/src/pages/Cabinet/components/HourPickerSheet.tsx

@@ -21,7 +21,7 @@ export const HourPickerSheet: React.FC<HourPickerSheetProps> = ({
 
     return (
         <BottomSheet isOpen={isOpen} onClose={onClose} title={title}>
-            <div style={{ padding: '16px 16px 120px' }}>
+            <div style={{ padding: '16px 16px 16px' }}>
                 <div className={styles.grid}>
                     {Array.from({ length: 24 }).map((_, hour) => (
                         <button

web/src/pages/Cabinet/components/NotificationEditorSheet.tsx

@@ -68,7 +68,7 @@ export const NotificationEditorSheet: React.FC<NotificationEditorSheetProps> = (
     return (
         <>
             <BottomSheet isOpen={isOpen} onClose={onClose} title="Налаштування пуш">
-                <div style={{ padding: '0 16px 120px' }}>
+                <div style={{ padding: '0 16px 16px' }}>
                     <div className={styles.formGroup}>
                         <div className={styles.label}>Як назвемо локацію?</div>
                         <input 

web/src/pages/Cabinet/components/SignOutSheet.tsx

@@ -17,7 +17,7 @@ export const SignOutSheet: React.FC<SignOutSheetProps> = ({ isOpen, onClose, onC
 
     return (
         <BottomSheet isOpen={isOpen} onClose={onClose} title="Вийти з акаунту?">
-            <div style={{ padding: '0 0 24px' }}>
+            <div>
 
                 <p style={{ fontSize: '15px', color: '#71717a', textAlign: 'center', margin: '0 0 24px', lineHeight: 1.5 }}>
                     Ви виходите з акаунту{' '}

web/src/pages/Cabinet/components/SubGroupSheet.tsx

@@ -17,7 +17,7 @@ export const SubGroupSheet: React.FC<SubGroupSheetProps> = ({
 }) => {
     return (
         <BottomSheet isOpen={isOpen} onClose={onClose} title="Оберіть підчергу">
-            <div style={{ padding: '4px 16px 80px' }}>
+            <div style={{ padding: '4px 16px 16px' }}>
                 <SubgroupGrid 
                     selectedGroup={selectedGroup} 
                     onSelect={(g) => {

web/src/styles/index.css

@@ -13,7 +13,7 @@
   --nav-active-pill: rgba(238, 114, 33, 0.1);
   --nav-accent: #EE7221;
   --nav-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
-  --nav-bottom-buffer: 90px;
+  --nav-bottom-buffer: 96px;
 }
 
 /* Floating Navigation Bar V4 */