From 6bba2835bb472233ec19e3dd5530ef040b77115d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 7 Feb 2026 01:56:10 +0200
Subject: [PATCH] Fix fullscreen break screen - centering, progress bar, ripple
 sizing

- Center break content on fullscreen (was top-left aligned)
- Move fullscreen progress bar to screen bottom (was overlapping buttons)
- Scale ripple circles to match ring size per mode (140/160/200px)
- Increase ripple expansion for more dramatic spread
---
 src/lib/components/BreakScreen.svelte | 46 ++++++++++++++++-----------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/BreakScreen.svelte b/src/lib/components/BreakScreen.svelte
index b6d10d4..59c86e7 100644
--- a/src/lib/components/BreakScreen.svelte
+++ b/src/lib/components/BreakScreen.svelte
@@ -168,23 +168,19 @@
 {:else}
   <!-- ── In-app break screen: full-screen fill OR modal with backdrop ── -->
   <div
-    class="relative h-full"
-    class:flex={isModal}
-    class:items-center={isModal}
-    class:justify-center={isModal}
-    style={isModal ? `background: #000;` : ""}
+    class="relative h-full flex items-center justify-center"
+    style="background: #000;"
   >
     <div
-      class="relative flex flex-col"
-      class:h-full={!isModal}
+      class="relative flex flex-col items-center"
       class:break-modal={isModal}
     >
       <!-- Break ring with breathing pulse + ripples -->
       <div class="mb-6 relative" use:scaleIn={{ duration: 0.6, delay: 0.1 }}>
         <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
-          <div class="break-ripple ripple-1" style="--ripple-color: {$config.break_color}"></div>
-          <div class="break-ripple ripple-2" style="--ripple-color: {$config.break_color}"></div>
-          <div class="break-ripple ripple-3" style="--ripple-color: {$config.break_color}"></div>
+          <div class="break-ripple ripple-1" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
+          <div class="break-ripple ripple-2" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
+          <div class="break-ripple ripple-3" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
         </div>
 
         <div class="break-breathe relative">
@@ -267,16 +263,30 @@
         {/if}
       {/if}
 
-      <!-- Bottom progress bar for modal - uses clip-path to respect border radius -->
-      <div class="break-modal-progress-container">
-        <div class="break-modal-progress-track">
+      <!-- Bottom progress bar for modal -->
+      {#if isModal}
+        <div class="break-modal-progress-container">
+          <div class="break-modal-progress-track">
+            <div
+              class="h-full transition-[width] duration-1000 ease-linear"
+              style="width: {$timer.breakProgress * 100}%; background: {barGradient};"
+            ></div>
+          </div>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Fullscreen progress bar - anchored to bottom of screen -->
+    {#if !isModal}
+      <div class="absolute bottom-8 left-12 right-12 h-[3px] rounded-full overflow-hidden">
+        <div class="w-full h-full" style="background: rgba(255,255,255,0.03);">
           <div
             class="h-full transition-[width] duration-1000 ease-linear"
             style="width: {$timer.breakProgress * 100}%; background: {barGradient};"
           ></div>
         </div>
       </div>
-    </div>
+    {/if}
   </div>
 {/if}
 
@@ -393,8 +403,8 @@
   /* ── Ripple circles ── */
   .break-ripple {
     position: absolute;
-    width: 140px;
-    height: 140px;
+    width: var(--ripple-size, 140px);
+    height: var(--ripple-size, 140px);
     border-radius: 50%;
     border: 1.5px solid var(--ripple-color);
     opacity: 0;
@@ -407,10 +417,10 @@
   @keyframes ripple-expand {
     0% {
       transform: scale(1);
-      opacity: 0.3;
+      opacity: 0.25;
     }
     100% {
-      transform: scale(2.2);
+      transform: scale(2.5);
       opacity: 0;
     }
   }