Remove fieldset

styles/less/global/elements.less

@@ -565,65 +565,12 @@
 }
 
 .application.setting.dh-style {
-    fieldset {
     h2,
     h3,
     h4 {
         margin: 8px 0 4px;
         text-align: center;
     }
-        .title-hint {
-            font-size: var(--font-size-12);
-            font-variant: small-caps;
-            text-align: center;
-        }
-
-        .field-section {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-
-            .split-section {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
-
-                > label {
-                    grid-column: span 2;
-                    text-align: center;
-                    font-size: var(--font-size-18);
-                    font-weight: bold;
-                }
-            }
-        }
-
-        .label-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-
-            &.full-width {
-                grid-template-columns: 1fr 1fr 1fr 1fr;
-
-                select {
-                    grid-column: span 3;
-                }
-            }
-
-            label {
-                align-self: center;
-                text-align: center;
-                white-space: nowrap;
-            }
-        }
-
-        .button-container {
-            display: grid;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-        }
-    }
 
     footer {
         margin-top: 8px;

styles/less/ui/settings/appearance-settings/diceSoNice.less

@@ -1,6 +1,14 @@
 .daggerheart.dh-style.setting.appearance-settings {
+    .tab.active[data-tab="diceSoNice"] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
     .diceSoNice-footer {
         display: grid;
+        align-items: center;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 8px;
         margin-top: 32px;
@@ -13,4 +21,49 @@
             grid-column: span 2;
         }
     }
+
+    .title-hint {
+        font-size: var(--font-size-12);
+        font-variant: small-caps;
+        text-align: center;
+    }
+
+    .split-section {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+
+        > label {
+            grid-column: span 2;
+            text-align: center;
+            font-size: var(--font-size-18);
+            font-weight: bold;
+        }
+    }
+
+    .field-section {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .label-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+
+        &.full-width {
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+
+            select {
+                grid-column: span 3;
+            }
+        }
+
+        label {
+            align-self: center;
+            text-align: center;
+            white-space: nowrap;
+        }
+    }
 }

templates/settings/appearance-settings/diceSoNice.hbs

@@ -1,14 +1,12 @@
 <section class="tab {{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
-  <fieldset>
     <div class="title-hint">{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.hint"}}</div>
 
     <h3>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.globalAnimations"}}</h3>  
-    <div class="split-section"> 
+
     <div class="label-container full-width">
         <label>{{localize "DAGGERHEART.CONFIG.DaggerheartDiceAnimationEvents.critical.name"}}</label>
         {{formInput fields.diceSoNice.fields.sfx.fields.critical.fields.class value=setting.diceSoNice.sfx.critical.class blank="" localize=true}}
     </div>
-    </div>  
 
     <section class='tab-navigation'>
         <div class='navigation-container'>
@@ -90,5 +88,4 @@
             </div>
         </section>
     {{/each}}
-  </fieldset>
 </section>