vibe-coding adaptive design

src/components/Timer/Timer.module.css

@@ -31,6 +31,7 @@
     border-color: #DCC3F8;
     border-width: 0.8rem;
     border-style: solid;
+    margin: 0 auto;
 }
 
 .clock_text {
@@ -54,6 +55,22 @@
     gap: 1.6rem;
 }
 
+@media (max-width: 768px) {
+    .timer_container {
+        width: 100%;
+        max-width: 350px;
+    }
+
+    .clock {
+        width: 22rem;
+        height: 22rem;
+    }
+
+    .clock_text {
+        font-size: 3.5rem;
+    }
+    }
+
 .dates_item {
     display: flex;
     justify-content: center;

src/pages/Timers/Timers.module.css

@@ -13,8 +13,41 @@ body, html {
     gap: 1.6rem;
 }
 
-.header .header_item:nth-child(2) {
-    margin-left: auto;
+.mobile_row {
+    display: flex;
+    gap: 1.6rem;
+}
+
+@media (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .header .header_item:first-child {
+        align-self: center;
+        margin: 0 auto;
+    }
+
+    .mobile_row {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 1rem;
+    }
+
+    .header .header_item:nth-child(2) {
+        margin-left: 0;
+    }
+
+    .timers_container {
+        justify-content: center;
+    }
+
+    .title {
+        font-size: 3.2rem;
+    }
 }
 
 .content {

src/pages/Timers/Timers.tsx

@@ -24,8 +24,10 @@ const Timers = () => {
             <div className={styles.content}>
                 <header className={styles.header}>
                     <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>MetaTimer</a>
-                    <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>{formatFullTime(time)}</a>
-                    <Button className={styles.header_item} label={"?"} onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}/>
+                    <div className={styles.mobile_row}>
+                        <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>{formatFullTime(time)}</a>
+                        <Button className={styles.header_item} label={"?"} onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}/>
+                    </div>
                 </header>
                 <div className={styles.timers_container}>
                     <Timer id={"timer_1"}/>