Fixed overflow layout and added confirmation on countdown removal

lang/en.json

@@ -1054,6 +1054,8 @@
             },
             "NewCountdown": "New Countdown",
             "AddCountdown": "Add Countdown",
+            "RemoveCountdownTitle": "Remove Countdown",
+            "RemoveCountdownText": "Are you sure you want to remove the countdown: {name}?",
             "Title": "{type} Countdowns",
             "Types": {
                 "narrative": "Narrative",

module/applications/countdowns.mjs

@@ -18,6 +18,7 @@ class Countdowns extends HandlebarsApplicationMixin(ApplicationV2) {
     static DEFAULT_OPTIONS = {
         classes: ['daggerheart', 'dh-style', 'countdown'],
         tag: 'form',
+        position: { width: 740, height: 700 },
         window: {
             frame: true,
             title: 'Countdowns',
@@ -34,7 +35,8 @@ class Countdowns extends HandlebarsApplicationMixin(ApplicationV2) {
 
     static PARTS = {
         countdowns: {
-            template: 'systems/daggerheart/templates/views/countdowns.hbs'
+            template: 'systems/daggerheart/templates/views/countdowns.hbs',
+            scrollable: ['.expanded-view']
         }
     };
 
@@ -148,6 +150,16 @@ class Countdowns extends HandlebarsApplicationMixin(ApplicationV2) {
 
     static async removeCountdown(_, target) {
         const countdownSetting = game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.Countdowns);
+        const countdownName = countdownSetting[this.basePath].countdowns[target.dataset.countdown].name;
+
+        const confirmed = await foundry.applications.api.DialogV2.confirm({
+            window: {
+                title: game.i18n.localize('DAGGERHEART.Countdown.RemoveCountdownTitle')
+            },
+            content: game.i18n.format('DAGGERHEART.Countdown.RemoveCountdownText', { name: countdownName })
+        });
+        if (!confirmed) return;
+
         await countdownSetting.updateSource({ [`${this.basePath}.countdowns.-=${target.dataset.countdown}`]: null });
 
         await game.settings.set(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.Countdowns, countdownSetting.toObject());

styles/countdown.less

@@ -1,4 +1,6 @@
 .daggerheart.dh-style.countdown {
+    overflow: hidden;
+
     fieldset {
         align-items: center;
         margin-top: 5px;
@@ -19,7 +21,7 @@
     &.minimized {
         height: auto !important;
         max-height: unset !important;
-        max-width: 600px !important;
+        max-width: 740px !important;
         width: auto !important;
 
         .window-content {
@@ -69,6 +71,26 @@
         display: none;
     }
 
+    .window-content {
+        > div {
+            height: 100%;
+
+            .expanded-view {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+
+                .countdowns-container {
+                    display: flex;
+                    gap: 8px;
+                    flex-wrap: wrap;
+                    overflow: auto;
+                    max-height: 100%;
+
+                    .countdown-fieldset {
+                        width: 340px;
+                        height: min-content;
+
                         .countdown-container {
                             display: flex;
                             align-items: center;
@@ -95,4 +117,9 @@
                                 }
                             }
                         }
+                    }
+                }
+            }
+        }
+    }
 }

styles/daggerheart.css

@@ -3191,6 +3191,9 @@ div.daggerheart.views.multiclass {
 #resources:has(.fear-bar) {
   min-width: 200px;
 }
+.daggerheart.dh-style.countdown {
+  overflow: hidden;
+}
 .daggerheart.dh-style.countdown fieldset {
   align-items: center;
   margin-top: 5px;
@@ -3208,7 +3211,7 @@ div.daggerheart.views.multiclass {
 .daggerheart.dh-style.countdown.minimized {
   height: auto !important;
   max-height: unset !important;
-  max-width: 600px !important;
+  max-width: 740px !important;
   width: auto !important;
 }
 .daggerheart.dh-style.countdown.minimized .window-content {
@@ -3247,26 +3250,45 @@ div.daggerheart.views.multiclass {
 .daggerheart.dh-style.countdown .hidden {
   display: none;
 }
-.daggerheart.dh-style.countdown .countdown-container {
+.daggerheart.dh-style.countdown .window-content > div {
+  height: 100%;
+}
+.daggerheart.dh-style.countdown .window-content > div .expanded-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  overflow: auto;
+  max-height: 100%;
+}
+.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset {
+  width: 340px;
+  height: min-content;
+}
+.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container {
   display: flex;
   align-items: center;
   gap: 16px;
 }
-.daggerheart.dh-style.countdown .countdown-container img {
+.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container img {
   width: 150px;
   height: 150px;
   cursor: pointer;
 }
-.daggerheart.dh-style.countdown .countdown-container .countdown-inner-container {
+.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container .countdown-inner-container {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.daggerheart.dh-style.countdown .countdown-container .countdown-inner-container .countdown-value-container {
+.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container .countdown-inner-container .countdown-value-container {
   display: flex;
   gap: 4px;
 }
-.daggerheart.dh-style.countdown .countdown-container .countdown-inner-container .countdown-value-container input {
+.daggerheart.dh-style.countdown .window-content > div .expanded-view .countdowns-container .countdown-fieldset .countdown-container .countdown-inner-container .countdown-value-container input {
   max-width: 80px;
 }
 .daggerheart.dh-style.setting fieldset {

templates/views/countdowns.hbs

@@ -1,8 +1,10 @@
 <div>
     <div class="expanded-view {{#if minimized}}hidden{{/if}}">
         <div class="flexrow"><button data-action="addCountdown">{{localize "DAGGERHEART.Countdown.AddCountdown"}}</button></div>
+
+        <div class="countdowns-container">
             {{#each source.countdowns}}
-            <fieldset>
+                <fieldset class="countdown-fieldset">
                     <legend>{{this.name}} <a><i class="fa-solid fa-trash icon-button" data-action="removeCountdown" data-countdown="{{@key}}"></i></a></legend>
 
                     <div class="countdown-container">
@@ -19,6 +21,7 @@
                 </fieldset>
             {{/each}}
         </div>
+    </div>
     <div class="minimized-view {{#if (not minimized)}}hidden{{/if}}">
         {{#each source.countdowns}}
             <a class="mini-countdown-container" data-countdown="{{@key}}">