css fixes for power dialog

src/module/powers/basePowers.js

@@ -59,7 +59,7 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application
       width: 600,
       height: 'auto',
     },
-    classes: ['standard-form', 'mbSwade', 'mbSwadeForm', 'mbSwadePowerEffectsForm'],
+    classes: ['mbSwade', 'mbSwadeForm', 'mbSwadePowerEffectsForm'],
     window: {
       icon: 'fa-solid fa-hand-sparkles',
       title: 'Apply Effect',
@@ -69,15 +69,14 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application
   static PARTS = {
     header: {
       template: templates['dialogHeader.html'],
-      classes: ['mbSwade', 'mbSwadeDialogHeader', 'flexrow'],
+      classes: ['mbSwade', 'mbSwadeDialogHeader', 'mbSwadePowerEffectsHeader'],
     },
     body: {
       template: templates['powerDialog.html'],
-      classes: ['mbSwadePowerEffectsBody'],
+      classes: ['mbSwade', 'mbSwadePowerEffectsBody', 'scrollable'],
     },
     footer: {
       template: 'templates/generic/form-footer.hbs',
-      classes: ['sheet-footer', 'flexrow'],
     },
   };
 
@@ -116,9 +115,16 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application
           modifier.choices[choice] = `${modifier.choices[choice]}${val}`;
         }
       }
+      if (modifier.isRadio) {
+        for (const choice in modifier.choices) {
+          let val = modifier.choices[choice];
+          modifier.choices[choice] = { text: val, checked: choice == modifier.default };
+        }
+      }
     }
     const data = {
       name: this.powerEffect.name,
+      formId: foundry.utils.randomID(),
       headerTitle: `${this.powerEffect.name} Effect`,
       headerSubtitle: `Apply the effects from ${this.powerEffect.name}`,
       icon: this.powerEffect.icon,

src/styles/swade-mb-helpers.scss

@@ -1,32 +1,103 @@
-.mbSwadeForm {
-  label.checkbox {
-    font-size: var(--font-size-14);
-  }
-}
+.mbSwade {
+  &.mbSwadeForm {
+    footer.form-footer {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: stretch;
+      align-content: stretch;
+      gap: 0.25em;
 
-table.mbForm {
-  th {
-    padding-left: 0.25em;
-    padding-right: 0.25em;
+      &>button {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+      }
     }
-}
 
-.mbSwade.mbSwadeDialogHeader {
+    .mbFormFields {
+      display: grid;
+      grid-template-columns: minmax(5em, 2fr) 5fr;
+      grid-gap: 0.5em 0.5em;
+      grid-auto-flow: row dense;
+
+      &>.form-group {
+        display: contents;
+
+        &>label {
+          grid-column: 1 / span 1;
+          justify-self: end;
+
+          &::after {
+            content: ":";
+          }
+
+          &.mbcheckbox {
+            grid-column: 2 / span 1;
+            justify-self: start;
+
+            &::after {
+              content: "";
+            }
+          }
+        }
+
+        &>input {
+          grid-column: 2 / span 1;
+          justify-self: start;
+
+          &[type="checkbox"] {
+            grid-column: 1 / span 1;
+            justify-self: end;
+          }
+        }
+
+        &>fieldset {
+          grid-column: 1 / span 2;
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+
+          &>label {
+            text-align: right;
+
+            &::after {
+              content: ":";
+            }
+          }
+
+          &>input {
+            margin-right: 2em;
+          }
+        }
+      }
+    }
+  }
+
+  .mbSwadeDialogHeader {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
     align-items: flex-start;
+    align-content: stretch;
+    gap: 0.5em;
 
-  img.mbSwadeIcon {
-    margin-right: 1em;
+    &>* {
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: auto
     }
 
-  .mbSwadeTitle {
+    &>.mbSwadeIcon {
+      flex-grow: 0;
+    }
+
+    &>.mbSwadeTitle {
       h2:has(+ p) {
         margin-bottom: 0;
       }
     }
-}
-
-.mbSwade.mbSwadeForm {
-  .mbSwadePowerEffectsBody {
-    margin-bottom: 0.5em;
   }
 }

src/templates/dialogHeader.html

@@ -1,6 +1,8 @@
 <header>
-  <img src="{{icon}}" height="64" width="64" class="flex0 mbSwadeIcon" title="{{name}} Effect" alt=" " />
-  <div class="flexcol mbSwadeTitle">
+  {{#if icon}}
+  <img src="{{icon}}" height="64" width="64" class="mbSwadeIcon" title="{{name}} Effect" alt=" " />
+  {{/if}}
+  <div class="mbSwadeTitle">
     <h2>{{headerTitle}}</h2>
     {{#if headerSubtitle}}<p>{{headerSubtitle}}</p>{{/if}}
   </div>

src/templates/powerDialog.html

@@ -17,31 +17,38 @@
     {{/if}}
   </p>
   {{/if}}
+  <section class="mbFormFields">
     {{#each modifiers}}
     <div class="form-group">
+      {{#unless isRadio}}
+      <label class="mb{{type}}" for="{{../formId}}-{{id}}"><span class="mbModName">{{#if epic}}⭐
+          {{/if}}{{name}}</span>{{#if value}}
+        <span class="mbModValue">({{numberFormat value decimals=0 sign=true}})</span>{{/if}}</label>
+      {{/unless}}
       {{#if isCheckbox}}
-    <label class="checkbox">
-      <input type="checkbox" name="{{id}}" {{checked default}} />
-      {{#if epic}}⭐ {{/if}}{{name}}
-      {{#if value}}({{numberFormat value decimals=0 sign=true}}){{/if}}
-    </label>
+      <input type="checkbox" name="{{id}}" id="{{../formId}}-{{id}}" {{checked default}} />
       {{/if}}
       {{#if isText}}
-    <label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
-    <input name="{{id}}" type="text" value="{{default}}">
+      <input name="{{id}}" id="{{formid}}-{{id}}" type="text" value="{{default}}">
       {{/if}}
       {{#if isNumber}}
-    <label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
-    <input name="{{id}}" type="number" value="{{default}}" {{#if step}}step="{{step}}" {{/if}} {{#if min}}min="{{min}}"
-      {{/if}} {{#if max}}max="{{max}}" {{/if}}>
+      <input name="{{id}}" id="{{../formId}}-{{id}}" type="number" value="{{default}}" {{#if step}}step="{{step}}"
+        {{/if}} {{#if min}}min="{{min}}" {{/if}} {{#if max}}max="{{max}}" {{/if}}>
       {{/if}}
       {{#if isSelect}}
-    <label for="{{id}}">{{#if epic}}⭐ {{/if}}{{name}}:</label>
-    <select name="{{id}}">{{selectOptions choices selected=default}}</select>
+      <select name="{{id}}" id="{{../formId}}-{{id}}">{{selectOptions choices selected=default}}</select>
       {{/if}}
       {{#if isRadio}}
-    {{#if epic}}⭐ {{/if}}{{name}}:</label> {{radioBoxes id choices checked=default}}
+      <fieldset class="mbRadiogroup">
+        <legend>{{#if epic}}⭐ {{/if}}{{name}}</legend>
+        {{#each choices}}
+        <label class="mbradio" for="{{../../formId}}-{{../id}}-{{@key}}">{{text}}</label>
+        <input type="radio" name="{{../id}}" {{checked checked}} id="{{../../formId}}-{{../id}}-{{@key}}"
+          value="{{@key}}">
+        {{/each}}
         {{/if}}
+      </fieldset>
     </div>
     {{/each}}
+  </section>
 </section>