From efee5578a104709a0a5f41fa8397fceef926083d Mon Sep 17 00:00:00 2001
From: iann460 <ianmusowa09@gmail.com>
Date: Thu, 5 Feb 2026 11:18:53 +0200
Subject: [PATCH 1/7] Reduce the padding at the top (#1312) #1312

---
 cms/src/components/content/EditContentBasic.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/cms/src/components/content/EditContentBasic.vue b/cms/src/components/content/EditContentBasic.vue
index 3b61198f2d..d129ad06e6 100644
--- a/cms/src/components/content/EditContentBasic.vue
+++ b/cms/src/components/content/EditContentBasic.vue
@@ -315,6 +315,15 @@ const clearExpiryDate = () => {
                     class="min-h-2"
                 />
 
+                <!-- Copyright -->
+                <FormLabel>Copyright</FormLabel>
+                <LInput
+                    name="copyright"
+                    :disabled="disabled"
+                    InputType="textarea"
+                    placeholder="© 2024 My Company"
+                    v-model="content.copyright"
+                />
                 <!-- Publish date -->
                 <FormLabel>Publish date</FormLabel>
                 <LInput

From 7c851a6e13ca199a061aedd372aeb401b2f1152b Mon Sep 17 00:00:00 2001
From: iann460 <ianmusowa09@gmail.com>
Date: Thu, 5 Feb 2026 17:54:00 +0200
Subject: [PATCH 2/7] feat: Add copyright field to content editing form

---
 .../components/content/EditContentBasic.vue   | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/cms/src/components/content/EditContentBasic.vue b/cms/src/components/content/EditContentBasic.vue
index d129ad06e6..2a46941445 100644
--- a/cms/src/components/content/EditContentBasic.vue
+++ b/cms/src/components/content/EditContentBasic.vue
@@ -315,15 +315,6 @@ const clearExpiryDate = () => {
                     class="min-h-2"
                 />
 
-                <!-- Copyright -->
-                <FormLabel>Copyright</FormLabel>
-                <LInput
-                    name="copyright"
-                    :disabled="disabled"
-                    InputType="textarea"
-                    placeholder="© 2024 My Company"
-                    v-model="content.copyright"
-                />
                 <!-- Publish date -->
                 <FormLabel>Publish date</FormLabel>
                 <LInput
@@ -438,6 +429,19 @@ const clearExpiryDate = () => {
                 </div>
             </div>
 
+            <!-- Copyright -->
+            <div class="mt-2 flex items-center gap-5">
+                <FormLabel class="whitespace-nowrap">Copyright</FormLabel>
+                <LInput
+                    name="copyright"
+                    :disabled="disabled"
+                    inputType="textarea"
+                    placeholder="© 2024 My Company"
+                    v-model="content.copyright"
+                    class="flex-1"
+                />
+            </div>
+
             <!-- Status -->
             <div class="mt-2 flex items-center justify-between gap-2">
                 <FormLabel class="self-start py-2">Status</FormLabel>

From aaf88c06c8d8c463be8009ccf3bf38c4254e4840 Mon Sep 17 00:00:00 2001
From: iann460 <ianmusowa09@gmail.com>
Date: Fri, 6 Feb 2026 17:42:54 +0200
Subject: [PATCH 3/7] feat: Add optional copyright field to ContentDto and
 update EditContentBasic component

---
 api/src/dto/ContentDto.ts                       | 5 +++++
 cms/src/components/content/EditContentBasic.vue | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/api/src/dto/ContentDto.ts b/api/src/dto/ContentDto.ts
index 8d09b51f6d..4e5131adab 100644
--- a/api/src/dto/ContentDto.ts
+++ b/api/src/dto/ContentDto.ts
@@ -153,4 +153,9 @@ export class ContentDto extends _contentBaseDto {
     @IsString()
     @Expose()
     parentImageBucketId?: string; // Inherited from parent Post/Tag for image storage
+
+    @IsOptional()
+    @IsString()
+    @Expose()
+    copyright?: string;
 }
diff --git a/cms/src/components/content/EditContentBasic.vue b/cms/src/components/content/EditContentBasic.vue
index 2a46941445..bb520c27ab 100644
--- a/cms/src/components/content/EditContentBasic.vue
+++ b/cms/src/components/content/EditContentBasic.vue
@@ -437,7 +437,7 @@ const clearExpiryDate = () => {
                     :disabled="disabled"
                     inputType="textarea"
                     placeholder="© 2024 My Company"
-                    v-model="content.copyright"
+                    v-model="(content as any).copyright"
                     class="flex-1"
                 />
             </div>

From 183e2df48386b85dc43aa2dbd51520b9560d4c36 Mon Sep 17 00:00:00 2001
From: iann460 <ianmusowa09@gmail.com>
Date: Thu, 19 Feb 2026 16:04:37 +0200
Subject: [PATCH 4/7] feat: Display copyright information in SingleContent
 component

---
 app/src/pages/SingleContent/SingleContent.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/src/pages/SingleContent/SingleContent.vue b/app/src/pages/SingleContent/SingleContent.vue
index 0cd33d5f32..e33d6bc56f 100644
--- a/app/src/pages/SingleContent/SingleContent.vue
+++ b/app/src/pages/SingleContent/SingleContent.vue
@@ -668,6 +668,12 @@ const quickLanguageSwitch = (languageId: string) => {
                             >
                                 By {{ content.author }}
                             </div>
+                            <div
+                                v-if="(content as any).copyright"
+                                class="text-center text-xs text-zinc-500 dark:text-slate-300"
+                            >
+                                {{ (content as any).copyright }}
+                            </div>
                             <div
                                 class="text-center text-xs text-zinc-500 dark:text-slate-300"
                                 v-if="content.publishDate && content.parentPublishDateVisible"

From 25ea424bdc8ba96185af8533b516d5a0391b59f1 Mon Sep 17 00:00:00 2001
From: iann460 <ianmusowa09@gmail.com>
Date: Thu, 19 Feb 2026 16:31:22 +0200
Subject: [PATCH 5/7] Added copyright type

---
 shared/src/types/dto.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/shared/src/types/dto.ts b/shared/src/types/dto.ts
index 2c1669e636..89adfc0e24 100644
--- a/shared/src/types/dto.ts
+++ b/shared/src/types/dto.ts
@@ -110,6 +110,7 @@ export type ContentDto = ContentBaseDto & {
     parentTaggedDocs?: Uuid[];
     availableTranslations?: Uuid[];
     parentImageBucketId?: Uuid;
+    copyright?: string;
 };
 
 export type ContentParentDto = ContentBaseDto & {

From 73e7090210aa335829caa13533a9cb8a99179ea3 Mon Sep 17 00:00:00 2001
From: Dirk <dirkdevbusiness@gmail.com>
Date: Fri, 20 Feb 2026 09:49:05 +0200
Subject: [PATCH 6/7] feat: Enhance LDropdown and LCombobox components with
 improved event handling and positioning logic

---
 cms/src/components/common/LDropdown.vue | 92 +++++++++++++++++--------
 cms/src/components/forms/LCombobox.vue  | 14 +---
 2 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/cms/src/components/common/LDropdown.vue b/cms/src/components/common/LDropdown.vue
index 09a744d2cb..d31d8a0ca9 100644
--- a/cms/src/components/common/LDropdown.vue
+++ b/cms/src/components/common/LDropdown.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref, computed, watch, nextTick } from "vue";
-import { onClickOutside } from "@vueuse/core";
+import { onClickOutside, useEventListener } from "@vueuse/core";
+import LTeleport from "./LTeleport.vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -15,18 +16,25 @@ const show = defineModel<boolean>("show", { required: true });
 const rootRef = ref<HTMLElement | null>(null);
 const panelRef = ref<HTMLElement | null>(null);
 const panelId = `dropdown-panel-${Math.random().toString(36).slice(2)}`;
+const triggerRect = ref<DOMRect | null>(null);
+const GAP = 4;
 
 const toggle = () => (show.value = !show.value);
 const close = () => (show.value = false);
 
+const updateTriggerRect = () => {
+    if (!show.value) return;
+    triggerRect.value = rootRef.value?.getBoundingClientRect() ?? null;
+};
+
 const onTriggerClick = (event: MouseEvent) => {
     if (event.defaultPrevented) return;
     toggle();
 };
 
-onClickOutside(rootRef.value, () => {
+onClickOutside(rootRef, () => {
     if (show.value) close();
-});
+}, { ignore: [panelRef] });
 
 // Focus first menuitem on open
 const focusFirst = () => {
@@ -39,10 +47,18 @@ const focusFirst = () => {
 
 watch(show, (val) => {
     if (val) {
-        nextTick(() => focusFirst());
+        nextTick(() => {
+            updateTriggerRect();
+            focusFirst();
+        });
+    } else {
+        triggerRect.value = null;
     }
 });
 
+useEventListener("resize", updateTriggerRect);
+useEventListener("scroll", updateTriggerRect, { capture: true });
+
 // Keyboard navigation inside panel (ArrowUp, ArrowDown, Enter, Escape)
 const onPanelKeydown = (e: KeyboardEvent) => {
     if (!show.value || !panelRef.value) return;
@@ -70,21 +86,40 @@ const onPanelKeydown = (e: KeyboardEvent) => {
     }
 };
 
-const placementClasses = computed(() => {
+const panelStyle = computed((): Record<string, string> => {
+    const rect = triggerRect.value;
+    if (!rect) return { position: "fixed", zIndex: "9999" };
+    const style: Record<string, string> = { position: "fixed", zIndex: "9999" };
     switch (props.placement) {
         case "bottom-start":
-            return "left-0 top-full mt-1";
+            style.left = `${rect.left}px`;
+            style.top = `${rect.bottom + GAP}px`;
+            break;
         case "bottom-end":
-            return "right-0 top-full mt-1";
+            style.right = `${window.innerWidth - rect.right}px`;
+            style.top = `${rect.bottom + GAP}px`;
+            break;
         case "top-start":
-            return "left-0 bottom-full mb-1";
+            style.left = `${rect.left}px`;
+            style.bottom = `${window.innerHeight - rect.top + GAP}px`;
+            break;
         case "top-end":
-            return "right-0 bottom-full mb-1";
+            style.right = `${window.innerWidth - rect.right}px`;
+            style.bottom = `${window.innerHeight - rect.top + GAP}px`;
+            break;
         case "top-center":
-            return "left-1/2 -translate-x-1/2 bottom-full mb-1";
+            style.left = `${rect.left + rect.width / 2}px`;
+            style.transform = "translateX(-50%)";
+            style.bottom = `${window.innerHeight - rect.top + GAP}px`;
+            break;
         default:
-            return "right-0 top-full mt-1";
+            style.right = `${window.innerWidth - rect.right}px`;
+            style.top = `${rect.bottom + GAP}px`;
     }
+    if (props.width === "full") {
+        style.width = `${rect.width}px`;
+    }
+    return style;
 });
 
 const paddingClass = computed(() =>
@@ -128,23 +163,24 @@ const widthClass = computed(() => {
             <slot name="trigger" />
         </div>
 
-        <div
-            v-show="show"
-            ref="panelRef"
-            :id="panelId"
-            class="absolute z-[9999] origin-top rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-            :class="[
-                placementClasses,
-                widthClass,
-                props.placement?.startsWith('top') ? 'origin-bottom' : 'origin-top',
-            ]"
-            role="menu"
-            data-dropdown-panel
-            @keydown="onPanelKeydown"
-        >
-            <div class="py-1" :class="paddingClass">
-                <slot />
+        <LTeleport v-if="show">
+            <div
+                ref="panelRef"
+                :id="panelId"
+                class="origin-top rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                :class="[
+                    widthClass,
+                    props.placement?.startsWith('top') ? 'origin-bottom' : 'origin-top',
+                ]"
+                :style="panelStyle"
+                role="menu"
+                data-dropdown-panel
+                @keydown="onPanelKeydown"
+            >
+                <div class="py-1" :class="paddingClass">
+                    <slot />
+                </div>
             </div>
-        </div>
+        </LTeleport>
     </div>
 </template>
diff --git a/cms/src/components/forms/LCombobox.vue b/cms/src/components/forms/LCombobox.vue
index dcf4dbdf0e..4067aedfdd 100644
--- a/cms/src/components/forms/LCombobox.vue
+++ b/cms/src/components/forms/LCombobox.vue
@@ -82,7 +82,7 @@ onClickOutside(
     () => {
         showDropdown.value = false;
     },
-    { ignore: [dropdown] },
+    { ignore: [dropdown, triggerRef] },
 );
 
 const highlightedIndex = ref(-1);
@@ -111,15 +111,6 @@ const toggle = () => {
     });
 };
 
-const open = () => {
-    if (!showDropdown.value) {
-        showDropdown.value = true;
-    }
-    nextTick(() => {
-        inputElement.value?.focus();
-    });
-};
-
 watch(showEditModal, (newVal) => {
     if (newVal) {
         nextTick(() => {
@@ -223,7 +214,7 @@ const placementClass = computed(() => {
                 class="relative flex justify-between gap-2 rounded-md border-[1px] border-zinc-300 bg-white pl-3 pr-8 focus-within:outline focus-within:outline-offset-[-2px] focus-within:outline-zinc-950"
                 tabindex="0"
                 v-bind="attrsWithoutStyles"
-                @click="open()"
+                @click="toggle()"
             >
                 <div class="flex items-center justify-center gap-2">
                     <div v-if="icon" class="flex items-center">
@@ -311,6 +302,7 @@ const placementClass = computed(() => {
                     class="overflow-y-auto rounded-md bg-white shadow-md focus:outline-none"
                     :class="[placementClass, 'max-h-48']"
                     data-test="options"
+                    @click.self="showDropdown = false"
                     @wheel.stop
                     @touchmove.stop
                 >

From f24973d15e314cc87b04ab58bd1ed70cee5d95fe Mon Sep 17 00:00:00 2001
From: Christian Touoyim <156022993+ChrisTouo@users.noreply.github.com>
Date: Thu, 26 Mar 2026 16:43:57 +0200
Subject: [PATCH 7/7] Remove the changes LDropdown.vue

---
 cms/src/components/common/LDropdown.vue | 92 ++++++++-----------------
 1 file changed, 28 insertions(+), 64 deletions(-)

diff --git a/cms/src/components/common/LDropdown.vue b/cms/src/components/common/LDropdown.vue
index d31d8a0ca9..09a744d2cb 100644
--- a/cms/src/components/common/LDropdown.vue
+++ b/cms/src/components/common/LDropdown.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ref, computed, watch, nextTick } from "vue";
-import { onClickOutside, useEventListener } from "@vueuse/core";
-import LTeleport from "./LTeleport.vue";
+import { onClickOutside } from "@vueuse/core";
 
 defineOptions({ inheritAttrs: false });
 
@@ -16,25 +15,18 @@ const show = defineModel<boolean>("show", { required: true });
 const rootRef = ref<HTMLElement | null>(null);
 const panelRef = ref<HTMLElement | null>(null);
 const panelId = `dropdown-panel-${Math.random().toString(36).slice(2)}`;
-const triggerRect = ref<DOMRect | null>(null);
-const GAP = 4;
 
 const toggle = () => (show.value = !show.value);
 const close = () => (show.value = false);
 
-const updateTriggerRect = () => {
-    if (!show.value) return;
-    triggerRect.value = rootRef.value?.getBoundingClientRect() ?? null;
-};
-
 const onTriggerClick = (event: MouseEvent) => {
     if (event.defaultPrevented) return;
     toggle();
 };
 
-onClickOutside(rootRef, () => {
+onClickOutside(rootRef.value, () => {
     if (show.value) close();
-}, { ignore: [panelRef] });
+});
 
 // Focus first menuitem on open
 const focusFirst = () => {
@@ -47,18 +39,10 @@ const focusFirst = () => {
 
 watch(show, (val) => {
     if (val) {
-        nextTick(() => {
-            updateTriggerRect();
-            focusFirst();
-        });
-    } else {
-        triggerRect.value = null;
+        nextTick(() => focusFirst());
     }
 });
 
-useEventListener("resize", updateTriggerRect);
-useEventListener("scroll", updateTriggerRect, { capture: true });
-
 // Keyboard navigation inside panel (ArrowUp, ArrowDown, Enter, Escape)
 const onPanelKeydown = (e: KeyboardEvent) => {
     if (!show.value || !panelRef.value) return;
@@ -86,40 +70,21 @@ const onPanelKeydown = (e: KeyboardEvent) => {
     }
 };
 
-const panelStyle = computed((): Record<string, string> => {
-    const rect = triggerRect.value;
-    if (!rect) return { position: "fixed", zIndex: "9999" };
-    const style: Record<string, string> = { position: "fixed", zIndex: "9999" };
+const placementClasses = computed(() => {
     switch (props.placement) {
         case "bottom-start":
-            style.left = `${rect.left}px`;
-            style.top = `${rect.bottom + GAP}px`;
-            break;
+            return "left-0 top-full mt-1";
         case "bottom-end":
-            style.right = `${window.innerWidth - rect.right}px`;
-            style.top = `${rect.bottom + GAP}px`;
-            break;
+            return "right-0 top-full mt-1";
         case "top-start":
-            style.left = `${rect.left}px`;
-            style.bottom = `${window.innerHeight - rect.top + GAP}px`;
-            break;
+            return "left-0 bottom-full mb-1";
         case "top-end":
-            style.right = `${window.innerWidth - rect.right}px`;
-            style.bottom = `${window.innerHeight - rect.top + GAP}px`;
-            break;
+            return "right-0 bottom-full mb-1";
         case "top-center":
-            style.left = `${rect.left + rect.width / 2}px`;
-            style.transform = "translateX(-50%)";
-            style.bottom = `${window.innerHeight - rect.top + GAP}px`;
-            break;
+            return "left-1/2 -translate-x-1/2 bottom-full mb-1";
         default:
-            style.right = `${window.innerWidth - rect.right}px`;
-            style.top = `${rect.bottom + GAP}px`;
+            return "right-0 top-full mt-1";
     }
-    if (props.width === "full") {
-        style.width = `${rect.width}px`;
-    }
-    return style;
 });
 
 const paddingClass = computed(() =>
@@ -163,24 +128,23 @@ const widthClass = computed(() => {
             <slot name="trigger" />
         </div>
 
-        <LTeleport v-if="show">
-            <div
-                ref="panelRef"
-                :id="panelId"
-                class="origin-top rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-                :class="[
-                    widthClass,
-                    props.placement?.startsWith('top') ? 'origin-bottom' : 'origin-top',
-                ]"
-                :style="panelStyle"
-                role="menu"
-                data-dropdown-panel
-                @keydown="onPanelKeydown"
-            >
-                <div class="py-1" :class="paddingClass">
-                    <slot />
-                </div>
+        <div
+            v-show="show"
+            ref="panelRef"
+            :id="panelId"
+            class="absolute z-[9999] origin-top rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            :class="[
+                placementClasses,
+                widthClass,
+                props.placement?.startsWith('top') ? 'origin-bottom' : 'origin-top',
+            ]"
+            role="menu"
+            data-dropdown-panel
+            @keydown="onPanelKeydown"
+        >
+            <div class="py-1" :class="paddingClass">
+                <slot />
             </div>
-        </LTeleport>
+        </div>
     </div>
 </template>