From 50eff1e5d454e3ca381ce566e2dc055f2456e866 Mon Sep 17 00:00:00 2001
From: Linrador <68631622+Linrador@users.noreply.github.com>
Date: Tue, 23 Jun 2026 08:52:36 +0200
Subject: [PATCH] bugfix

---
 frontend/src/components/calendar/Calendar.tsx |  7 ++++-
 .../src/pages/devices/DeviceFormFields.tsx    | 30 ++++++++++---------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/calendar/Calendar.tsx b/frontend/src/components/calendar/Calendar.tsx
index 80d05e7..2194a4e 100644
--- a/frontend/src/components/calendar/Calendar.tsx
+++ b/frontend/src/components/calendar/Calendar.tsx
@@ -677,6 +677,7 @@ function TimeGridView({
     ? normalizeTimeRange(timeSelection.anchor, timeSelection.focus)
     : null
   const gridTemplateColumns = `3.5rem repeat(${days.length}, minmax(7rem, 1fr))`
+  const showHoverSlotTopEdge = days.length === 1
 
   function getSlotFromPointer(
     clientX: number,
@@ -1007,7 +1008,11 @@ function TimeGridView({
                     hoveredSlot?.dayKey === toDateKey(day) && (
                       <div
                         aria-hidden="true"
-                        className="pointer-events-none absolute right-1 left-1 z-[5] flex items-center gap-1.5 overflow-hidden rounded-lg border border-dashed border-indigo-400 bg-indigo-50/90 px-2 text-xs font-semibold text-indigo-700 shadow-sm dark:border-indigo-400/70 dark:bg-indigo-500/15 dark:text-indigo-200"
+                        className={classNames(
+                          'pointer-events-none absolute right-1 left-1 z-[5] flex items-center gap-1.5 overflow-hidden rounded-lg border border-dashed border-indigo-400 bg-indigo-50/90 px-2 text-xs font-semibold text-indigo-700 shadow-sm dark:border-indigo-400/70 dark:bg-indigo-500/15 dark:text-indigo-200',
+                          showHoverSlotTopEdge &&
+                            'before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-10 before:border-t before:border-dashed before:border-indigo-400 dark:before:border-indigo-400/70',
+                        )}
                         style={{
                           top: `${(hoveredSlot.minutes / 1440) * 100}%`,
                           height: `${(30 / 1440) * 100}%`,
diff --git a/frontend/src/pages/devices/DeviceFormFields.tsx b/frontend/src/pages/devices/DeviceFormFields.tsx
index 69bc984..d8d35fc 100644
--- a/frontend/src/pages/devices/DeviceFormFields.tsx
+++ b/frontend/src/pages/devices/DeviceFormFields.tsx
@@ -812,22 +812,24 @@ export default function DeviceFormFields({
                         isMilestoneDevice && !selected && 'opacity-45',
                       )}
                     >
-                      <span
-                        className={classNames(
-                          'flex size-8 items-center justify-center rounded-md',
-                          selected
-                            ? 'bg-indigo-600 text-white dark:bg-indigo-400 dark:text-gray-950'
-                            : 'bg-gray-100 text-gray-500 group-hover:bg-indigo-100 group-hover:text-indigo-600 dark:bg-white/10 dark:text-gray-400 dark:group-hover:bg-indigo-500/15 dark:group-hover:text-indigo-300',
-                        )}
-                      >
-                        <Icon aria-hidden="true" className="size-4" />
+                      <span className="flex w-full items-center gap-2">
+                        <span
+                          className={classNames(
+                            'flex size-8 shrink-0 items-center justify-center rounded-md',
+                            selected
+                              ? 'bg-indigo-600 text-white dark:bg-indigo-400 dark:text-gray-950'
+                              : 'bg-gray-100 text-gray-500 group-hover:bg-indigo-100 group-hover:text-indigo-600 dark:bg-white/10 dark:text-gray-400 dark:group-hover:bg-indigo-500/15 dark:group-hover:text-indigo-300',
+                          )}
+                        >
+                          <Icon aria-hidden="true" className="size-4" />
+                        </span>
+
+                        <span className="min-w-0 truncate text-sm font-semibold">
+                          {option.label}
+                        </span>
                       </span>
 
-                      <span className="mt-2 text-sm font-semibold">
-                        {option.label}
-                      </span>
-
-                      <span className="mt-0.5 text-xs leading-4 text-gray-500 dark:text-gray-400">
+                      <span className="mt-2 text-xs leading-4 text-gray-500 dark:text-gray-400">
                         {option.description}
                       </span>
                     </button>