From 9a11d1d086bdc98ff34d62b3cf7a2ef749739807 Mon Sep 17 00:00:00 2001
From: Ryan Palmer <admin@ryanpalmer.tech>
Date: Wed, 4 Sep 2024 15:21:12 +1000
Subject: [PATCH] Wrap menu in a filled fieldset

---
 .../table-of-contents-menu.tsx                | 59 +++++++++----------
 1 file changed, 27 insertions(+), 32 deletions(-)

diff --git a/apps/client/src/features/editor/components/table-of-contents/table-of-contents-menu.tsx b/apps/client/src/features/editor/components/table-of-contents/table-of-contents-menu.tsx
index 3c55f4a..1677c37 100644
--- a/apps/client/src/features/editor/components/table-of-contents/table-of-contents-menu.tsx
+++ b/apps/client/src/features/editor/components/table-of-contents/table-of-contents-menu.tsx
@@ -13,6 +13,7 @@ import {
     Text,
     Checkbox,
     Card,
+    Fieldset,
 } from "@mantine/core";
 import { IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight } from "@tabler/icons-react";
 import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
@@ -81,35 +82,29 @@ export function TableOfContentsMenu({ editor }: EditorMenuProps) {
             }}
             shouldShow={shouldShow}
         >
-            <Group gap={0}>
-                <Tooltip position="top" label="Divider type">
-                    <Select
-                        w={100}
-                        value={editor.getAttributes("tableOfContents").dividerType}
-                        data={[
-                            { value: "solid", label: "Solid" },
-                            { value: "dashed", label: "Dashed" },
-                            { value: "dotted", label: "Dotted" },
-                            { value: "none", label: "None" },
-                        ]}
-                        onChange={(_value, option) => setDividerType(_value as DividerVariant)}
-                    />
-                </Tooltip>
-                <Tooltip position="top" label="Table type">
-                    <SegmentedControl
-                        value={editor.getAttributes("tableOfContents").tableType}
-                        data={["Contents", "Child Pages"]}
-                        onChange={(value: "Contents" | "Child Pages") => setTableType(value)}
-                    />
-                </Tooltip>
-                <Tooltip position="top" label="Show page icons">
-                    <Card
-                        p="xs"
-                        m={0}
-                        onClick={() => setPageIcons(!editor.getAttributes("tableOfContents").icons)}
-                        style={{ cursor: "pointer" }}
-                        withBorder
-                    >
+            <Fieldset variant="filled" p="xs">
+                <Group gap="xs">
+                    <Tooltip position="top" label="Divider type">
+                        <Select
+                            w={100}
+                            value={editor.getAttributes("tableOfContents").dividerType}
+                            data={[
+                                { value: "solid", label: "Solid" },
+                                { value: "dashed", label: "Dashed" },
+                                { value: "dotted", label: "Dotted" },
+                                { value: "none", label: "None" },
+                            ]}
+                            onChange={(_value, option) => setDividerType(_value as DividerVariant)}
+                        />
+                    </Tooltip>
+                    <Tooltip position="top" label="Table type">
+                        <SegmentedControl
+                            value={editor.getAttributes("tableOfContents").tableType}
+                            data={["Contents", "Child Pages"]}
+                            onChange={(value: "Contents" | "Child Pages") => setTableType(value)}
+                        />
+                    </Tooltip>
+                    <Tooltip position="top" label="Show page icons">
                         <Group gap="xs">
                             <Text size="sm">Page Icons</Text>
                             <Checkbox
@@ -117,9 +112,9 @@ export function TableOfContentsMenu({ editor }: EditorMenuProps) {
                                 onChange={(event) => setPageIcons(event.currentTarget.checked)}
                             />
                         </Group>
-                    </Card>
-                </Tooltip>
-            </Group>
+                    </Tooltip>
+                </Group>
+            </Fieldset>
         </BaseBubbleMenu>
     );
 }