From dfdbe2edc2927d25617607708e5e939e5ebdc2e0 Mon Sep 17 00:00:00 2001
From: Bruce <brucefrankstad26@gmail.com>
Date: Fri, 21 Aug 2026 13:55:24 +0200
Subject: [PATCH 1/3] Dark Mode minor fix

---
 .../groups/GroupGraph/GroupGraph.vue          | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/cms/src/components/groups/GroupGraph/GroupGraph.vue b/cms/src/components/groups/GroupGraph/GroupGraph.vue
index b86e7b8c52..3913ad2560 100644
--- a/cms/src/components/groups/GroupGraph/GroupGraph.vue
+++ b/cms/src/components/groups/GroupGraph/GroupGraph.vue
@@ -261,19 +261,19 @@ watch(isFullscreen, () => {
                 <Panel position="bottom-left">
                     <div class="flex flex-col gap-1">
                         <LButton
-                            size="sm"
+                            size="lg"
                             variant="secondary"
                             :icon="PlusSmallIcon"
                             @click="zoomIn({ duration: 80 })"
                         />
                         <LButton
-                            size="sm"
+                            size="lg"
                             variant="secondary"
                             :icon="MinusIcon"
                             @click="zoomOut({ duration: 80 })"
                         />
                         <LButton
-                            size="sm"
+                            size="lg"
                             variant="secondary"
                             :icon="ArrowsPointingInIcon"
                             @click="fitView({ padding: 0.18, duration: 120 })"
@@ -293,7 +293,7 @@ watch(isFullscreen, () => {
                             class="pointer-events-auto flex h-9 shrink-0 divide-x divide-zinc-300 overflow-hidden rounded-md shadow-sm ring-1 ring-zinc-300"
                         >
                             <LButton
-                                size="sm"
+                                size="lg"
                                 variant="secondary"
                                 :icon="CursorArrowRaysIcon"
                                 :main-dynamic-css="segClass(interactionMode === 'select')"
@@ -302,7 +302,7 @@ watch(isFullscreen, () => {
                                 Select
                             </LButton>
                             <LButton
-                                size="sm"
+                                size="lg"
                                 variant="secondary"
                                 :icon="HandRaisedIcon"
                                 :main-dynamic-css="segClass(interactionMode === 'drag')"
@@ -315,7 +315,7 @@ watch(isFullscreen, () => {
                             class="pointer-events-auto hidden h-9 shrink-0 divide-x divide-zinc-300 overflow-hidden rounded-md shadow-sm ring-1 ring-zinc-300 sm:flex"
                         >
                             <LButton
-                                size="sm"
+                                size="lg"
                                 variant="secondary"
                                 :main-dynamic-css="segClass(isTopToBottom)"
                                 @click="selectLayoutDirection('TB')"
@@ -323,7 +323,7 @@ watch(isFullscreen, () => {
                                 Top down
                             </LButton>
                             <LButton
-                                size="sm"
+                                size="lg"
                                 variant="secondary"
                                 :main-dynamic-css="segClass(!isTopToBottom)"
                                 @click="selectLayoutDirection('LR')"
@@ -332,7 +332,7 @@ watch(isFullscreen, () => {
                             </LButton>
                         </div>
                         <div
-                            class="pointer-events-auto hidden h-9 shrink-0 items-center gap-2 rounded-md bg-white px-3 text-xs text-zinc-600 shadow-sm ring-1 ring-zinc-300 sm:flex"
+                            class="pointer-events-auto hidden h-9 shrink-0 items-center gap-2 rounded-md px-3 text-xs shadow-sm ring-1 ring-zinc-300 dark:bg-slate-700 dark:text-zinc-100 sm:flex"
                         >
                             <label for="group-graph-columns-desktop" class="font-medium">
                                 Columns
@@ -344,16 +344,16 @@ watch(isFullscreen, () => {
                                 :max="TREE_MAX_COLUMNS"
                                 step="1"
                                 :value="treeColumnCount"
-                                class="h-2 w-28 cursor-pointer appearance-none rounded-lg bg-zinc-200 accent-zinc-700"
+                                class="h-2 w-28 cursor-pointer appearance-none rounded-lg bg-zinc-200 dark:accent-zinc-100"
                                 @input="updateTreeColumnCount"
                             />
-                            <span class="w-3 text-right font-medium text-zinc-700">
+                            <span class="w-3 text-right font-medium dark:text-zinc-100">
                                 {{ treeColumnCount }}
                             </span>
                         </div>
                         <LButton
                             v-if="hasUnsavedLayout"
-                            size="sm"
+                            size="lg"
                             variant="secondary"
                             class="pointer-events-auto h-9 shrink-0"
                             @click="saveCustomLayout"
@@ -362,7 +362,7 @@ watch(isFullscreen, () => {
                         </LButton>
                         <LButton
                             v-if="savedLayout"
-                            size="sm"
+                            size="lg"
                             variant="secondary"
                             class="pointer-events-auto hidden h-9 shrink-0 sm:flex"
                             @click="applyStoredLayout()"
@@ -370,7 +370,7 @@ watch(isFullscreen, () => {
                             Use saved layout
                         </LButton>
                         <LButton
-                            size="sm"
+                            size="lg"
                             variant="secondary"
                             class="pointer-events-auto hidden h-9 shrink-0 sm:flex"
                             @click="resetLayout"
@@ -379,7 +379,7 @@ watch(isFullscreen, () => {
                         </LButton>
                         <LButton
                             v-if="savedLayout"
-                            size="sm"
+                            size="lg"
                             variant="secondary"
                             class="pointer-events-auto hidden h-9 shrink-0 sm:flex"
                             @click="clearSavedLayout"
@@ -398,7 +398,7 @@ watch(isFullscreen, () => {
                         />
                         <LButton
                             v-if="!isFullscreen"
-                            size="sm"
+                            size="lg"
                             variant="secondary"
                             :icon="isFullscreen ? ArrowsPointingInIcon : ArrowsPointingOutIcon"
                             class="pointer-events-auto h-9 w-9 shrink-0"
@@ -408,7 +408,7 @@ watch(isFullscreen, () => {
                 </div>
                 <LButton
                     v-if="isFullscreen"
-                    size="sm"
+                    size="lg"
                     variant="secondary"
                     :icon="XMarkIcon"
                     class="pointer-events-auto h-9 w-9 shrink-0"
@@ -431,7 +431,7 @@ watch(isFullscreen, () => {
             >
                 <LButton
                     variant="tertiary"
-                    size="sm"
+                    size="lg"
                     class="w-full justify-start"
                     @click="openContextGroup"
                 >

From 51d80b27a2c32b0b9ba98d2b54bf7e1fddc8aa01 Mon Sep 17 00:00:00 2001
From: Bruce <brucefrankstad26@gmail.com>
Date: Fri, 21 Aug 2026 15:12:47 +0200
Subject: [PATCH 2/3] tmp

---
 cms/src/components/groups/GroupGraph/GroupGraph.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cms/src/components/groups/GroupGraph/GroupGraph.vue b/cms/src/components/groups/GroupGraph/GroupGraph.vue
index 3913ad2560..732776391b 100644
--- a/cms/src/components/groups/GroupGraph/GroupGraph.vue
+++ b/cms/src/components/groups/GroupGraph/GroupGraph.vue
@@ -283,12 +283,12 @@ watch(isFullscreen, () => {
             </VueFlow>
 
             <div
-                class="pointer-events-none absolute left-3 right-3 top-1 z-40 flex items-start gap-2 py-2 sm:right-4 sm:top-2"
+                class="pointer-events-none absolute left-3 right-3 top-1 z-40 flex items-start gap-2 py-2 sm:right-1 sm:top-2"
             >
                 <div
                     class="pointer-events-auto -my-2 min-w-0 flex-1 overflow-x-auto py-2 scrollbar-hide"
                 >
-                    <div class="flex w-max flex-nowrap items-start gap-2 sm:ml-auto">
+                    <div class="ml-1 flex w-max flex-nowrap items-start gap-2 sm:ml-auto">
                         <div
                             class="pointer-events-auto flex h-9 shrink-0 divide-x divide-zinc-300 overflow-hidden rounded-md shadow-sm ring-1 ring-zinc-300"
                         >

From 53257f493d1dd9a9115dde72e4383e2263f91764 Mon Sep 17 00:00:00 2001
From: Bruce <brucefrankstad26@gmail.com>
Date: Tue, 25 Aug 2026 10:38:03 +0200
Subject: [PATCH 3/3] Graph button alignment and Fullscreen fix

---
 .../components/groups/GroupGraph/GraphSettingsMenu.vue | 10 +++++-----
 cms/src/components/groups/GroupGraph/GroupGraph.vue    |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/cms/src/components/groups/GroupGraph/GraphSettingsMenu.vue b/cms/src/components/groups/GroupGraph/GraphSettingsMenu.vue
index 39b06b139c..ece8dc62c6 100644
--- a/cms/src/components/groups/GroupGraph/GraphSettingsMenu.vue
+++ b/cms/src/components/groups/GroupGraph/GraphSettingsMenu.vue
@@ -33,11 +33,11 @@ function updateTreeColumnCount(event: Event) {
         class="pointer-events-auto shrink-0 sm:hidden"
     >
         <template #trigger>
-            <LButton size="sm" variant="secondary" :icon="Cog6ToothIcon" class="h-9 w-9" />
+            <LButton size="lg" variant="secondary" :icon="Cog6ToothIcon" class="h-9 w-9" />
         </template>
         <LButton
             variant="tertiary"
-            size="sm"
+            size="lg"
             role="menuitem"
             class="w-full justify-start"
             @click="
@@ -71,7 +71,7 @@ function updateTreeColumnCount(event: Event) {
         <LButton
             v-if="savedLayoutExists"
             variant="tertiary"
-            size="sm"
+            size="lg"
             role="menuitem"
             class="w-full justify-start"
             @click="
@@ -83,7 +83,7 @@ function updateTreeColumnCount(event: Event) {
         </LButton>
         <LButton
             variant="tertiary"
-            size="sm"
+            size="lg"
             role="menuitem"
             class="w-full justify-start"
             @click="
@@ -96,7 +96,7 @@ function updateTreeColumnCount(event: Event) {
         <LButton
             v-if="savedLayoutExists"
             variant="tertiary"
-            size="sm"
+            size="lg"
             role="menuitem"
             class="w-full justify-start"
             @click="
diff --git a/cms/src/components/groups/GroupGraph/GroupGraph.vue b/cms/src/components/groups/GroupGraph/GroupGraph.vue
index 732776391b..0c0b3e7930 100644
--- a/cms/src/components/groups/GroupGraph/GroupGraph.vue
+++ b/cms/src/components/groups/GroupGraph/GroupGraph.vue
@@ -290,7 +290,7 @@ watch(isFullscreen, () => {
                 >
                     <div class="ml-1 flex w-max flex-nowrap items-start gap-2 sm:ml-auto">
                         <div
-                            class="pointer-events-auto flex h-9 shrink-0 divide-x divide-zinc-300 overflow-hidden rounded-md shadow-sm ring-1 ring-zinc-300"
+                            class="pointer-events-auto flex h-9 shrink-0 divide-x divide-zinc-500 overflow-hidden rounded-md shadow-sm"
                         >
                             <LButton
                                 size="lg"
@@ -312,7 +312,7 @@ watch(isFullscreen, () => {
                             </LButton>
                         </div>
                         <div
-                            class="pointer-events-auto hidden h-9 shrink-0 divide-x divide-zinc-300 overflow-hidden rounded-md shadow-sm ring-1 ring-zinc-300 sm:flex"
+                            class="pointer-events-auto hidden h-9 shrink-0 divide-x divide-zinc-500 overflow-hidden rounded-md shadow-sm sm:flex"
                         >
                             <LButton
                                 size="lg"
@@ -332,7 +332,7 @@ watch(isFullscreen, () => {
                             </LButton>
                         </div>
                         <div
-                            class="pointer-events-auto hidden h-9 shrink-0 items-center gap-2 rounded-md px-3 text-xs shadow-sm ring-1 ring-zinc-300 dark:bg-slate-700 dark:text-zinc-100 sm:flex"
+                            class="pointer-events-auto hidden h-9 shrink-0 items-center gap-2 rounded-md px-3 text-xs shadow-sm dark:bg-slate-700 dark:text-zinc-100 sm:flex"
                         >
                             <label for="group-graph-columns-desktop" class="font-medium">
                                 Columns