From da29de71e5435c1d55c51098221a004399c9d338 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 10:42:53 +0200
Subject: [PATCH] Adopt shared WebUI layout primitives

---
 .../settings/QuickAccessSettingsPanel.tsx         | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/webui/src/features/settings/QuickAccessSettingsPanel.tsx b/webui/src/features/settings/QuickAccessSettingsPanel.tsx
index 4d61682..e20c1f5 100644
--- a/webui/src/features/settings/QuickAccessSettingsPanel.tsx
+++ b/webui/src/features/settings/QuickAccessSettingsPanel.tsx
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import {
   Button,
   DismissibleAlert,
+  FormSection,
   IconButton,
   i18nMessage,
   LoadingFrame,
@@ -208,9 +209,7 @@ export default function QuickAccessSettingsPanel({
       ) : null}
 
       <LoadingFrame loading={loading} label="i18n:govoplan-quick-access.loading">
-        <section className="quick-access-settings-section">
-          <h3>i18n:govoplan-quick-access.categories</h3>
-          <div className="quick-access-preference-list">
+        <FormSection className="quick-access-settings-section" title="i18n:govoplan-quick-access.categories" contentClassName="quick-access-preference-list">
             {categories.map((category, index) => (
               <PreferenceRow
                 key={category.id}
@@ -228,12 +227,9 @@ export default function QuickAccessSettingsPanel({
                 last={index === categories.length - 1}
               />
             ))}
-          </div>
-        </section>
+        </FormSection>
 
-        <section className="quick-access-settings-section">
-          <h3>i18n:govoplan-quick-access.registered_tools</h3>
-          <div className="quick-access-preference-list">
+        <FormSection className="quick-access-settings-section" title="i18n:govoplan-quick-access.registered_tools" contentClassName="quick-access-preference-list">
             {categories.flatMap((category) => {
               const categoryTools = tools.filter((tool) => tool.category_id === category.id);
               const toolIds = categoryTools.map((tool) => tool.id);
@@ -257,8 +253,7 @@ export default function QuickAccessSettingsPanel({
               ));
             })}
             {!tools.length ? <p className="quick-access-empty">i18n:govoplan-quick-access.no_registered_tools</p> : null}
-          </div>
-        </section>
+        </FormSection>
       </LoadingFrame>
     </div>
   );