Adopt shared WebUI layout primitives

webui/src/features/calendar/CalendarPage.tsx

@@ -8,7 +8,7 @@ import {
   type WheelEvent as ReactWheelEvent } from
 "react";
 import { CalendarDays, ChevronLeft, ChevronRight, Pencil, Plus, RefreshCw } from "lucide-react";
-import {
+import { ToolbarGroup, ActionToolbar,
   AdminIconButton,
   Button,
   DismissibleAlert,
@@ -854,8 +854,8 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
         </aside>
 
         <section className="calendar-main-panel" aria-label="i18n:govoplan-calendar.calendar.adab5090">
-          <div className="calendar-view-toolbar" aria-label="i18n:govoplan-calendar.calendar_controls.974f4fa1">
-            <div className="calendar-toolbar-left">
+          <ActionToolbar className="calendar-view-toolbar" aria-label="i18n:govoplan-calendar.calendar_controls.974f4fa1">
+            <ToolbarGroup grow className="calendar-toolbar-left">
               <SegmentedControl
                 className="calendar-mode-switch"
                 size="equal"
@@ -870,9 +870,9 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
                 }}
                 options={modeOptions}
               />
-            </div>
+            </ToolbarGroup>
 
-            <div className="calendar-toolbar-center">
+            <ToolbarGroup align="center" className="calendar-toolbar-center">
               <div className="calendar-icon-group" aria-label="i18n:govoplan-calendar.calendar_navigation.7ba43cd2">
                 <AdminIconButton
                   label="i18n:govoplan-calendar.previous.50f94286"
@@ -892,9 +892,9 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
                   <strong>{heading}</strong>
                 </div>
               </div>
-            </div>
+            </ToolbarGroup>
 
-            <div className="calendar-toolbar-right">
+            <ToolbarGroup align="end" className="calendar-toolbar-right">
               <DocumentationHelpLink reference={CALENDAR_DOCUMENTATION} />
               <AdminIconButton
                 label="i18n:govoplan-calendar.refresh.56e3badc"
@@ -906,8 +906,8 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
                   <Plus size={17} /> i18n:govoplan-calendar.new.6403f2b7
                 </Button>
               }
-            </div>
-          </div>
+            </ToolbarGroup>
+          </ActionToolbar>
 
           <div className={`calendar-view-shell is-${mode}`}>
             {mode === "continuous" ?