Make size of countdown window be based on number of buttons

Author: tom-james-watson

app/main/lib/breaks.ts

@@ -154,9 +154,9 @@ export function scheduleNextBreak(isPostpone = false): void {
     : settings.breakFrequencySeconds;
 
   breakTime = moment().add(seconds, "seconds");
-  
+
   log.info(
-    `Scheduling next break [isPostpone=${isPostpone}] [seconds=${seconds}] [postponeLength=${settings.postponeLengthSeconds}] [frequency=${settings.breakFrequencySeconds}] [scheduledFor=${breakTime.format('HH:mm:ss')}]`,
+    `Scheduling next break [isPostpone=${isPostpone}] [seconds=${seconds}] [postponeLength=${settings.postponeLengthSeconds}] [frequency=${settings.breakFrequencySeconds}] [scheduledFor=${breakTime.format("HH:mm:ss")}]`,
   );
 
   buildTray();

app/main/lib/windows.ts

@@ -2,6 +2,7 @@ import { app, BrowserWindow, screen } from "electron";
 import log from "electron-log";
 import path from "path";
 import { endPopupBreak } from "./breaks";
+import { getSettings } from "./store";
 
 let settingsWindow: BrowserWindow | null = null;
 let soundsWindow: BrowserWindow | null = null;
@@ -97,10 +98,17 @@ export function createSoundsWindow(): void {
 }
 
 export function createBreakWindows(): void {
+  const settings = getSettings();
+
+  let buttonCount = 1;
+  if (settings.postponeBreakEnabled) buttonCount++;
+  if (settings.skipBreakEnabled) buttonCount++;
+
+  const notificationWidth = 450 + (buttonCount - 1) * 50;
+
   const displays = screen.getAllDisplays();
   for (let windowIndex = 0; windowIndex < displays.length; windowIndex++) {
     const display = displays[windowIndex];
-    const notificationWidth = 500;
     const notificationHeight = 80;
     const breakWindow = new BrowserWindow({
       show: false,

app/renderer/components/break/break-notification.tsx

@@ -62,7 +62,7 @@ export function BreakNotification({
 
   const secondsRemaining = Math.ceil(msRemaining / 1000);
   const progressValue =
-    phase === "countdown" ? ((120000 - msRemaining) / 60000) * 100 : 0;
+    phase === "countdown" ? ((60000 - msRemaining) / 60000) * 100 : 0;
 
   return (
     <motion.div