From 119661628e3c027449a4e4ebb87b5cb4c778dcc9 Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Wed, 4 Mar 2026 10:06:22 +0300
Subject: [PATCH] refactor: enhance styling and structure in DayDetailContent
 component

- Updated list styling in DayDetailContent to use a cleaner format without bullet points, improving visual consistency.
- Added decorative bullet points for duty, unavailable, vacation, and event summaries to enhance readability.
- Adjusted spacing and layout for better alignment of list items, ensuring a more polished user interface.
---
 .../day-detail/DayDetailContent.tsx           | 54 +++++++++++++++----
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/webapp-next/src/components/day-detail/DayDetailContent.tsx b/webapp-next/src/components/day-detail/DayDetailContent.tsx
index 0b9390b..255de64 100644
--- a/webapp-next/src/components/day-detail/DayDetailContent.tsx
+++ b/webapp-next/src/components/day-detail/DayDetailContent.tsx
@@ -112,13 +112,21 @@ export function DayDetailContent({
             >
               {t("event_type.duty")}
             </h3>
-            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-1">
+            <ul className="list-none pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-2">
               {dutyRows.map((r) => (
                 <li key={r.id}>
-                  {r.timePrefix && (
-                    <span className="text-muted-foreground">{r.timePrefix} — </span>
-                  )}
-                  <span className="font-semibold">{r.fullName}</span>
+                  <span
+                    className="text-muted-foreground -ml-5 mr-0 shrink-0 select-none"
+                    aria-hidden
+                  >
+                    •
+                  </span>
+                  <span className="inline-flex items-baseline gap-1">
+                    {r.timePrefix && (
+                      <span className="text-muted-foreground">{r.timePrefix} — </span>
+                    )}
+                    <span className="font-semibold">{r.fullName}</span>
+                  </span>
                 </li>
               ))}
             </ul>
@@ -136,9 +144,17 @@ export function DayDetailContent({
             >
               {t("event_type.unavailable")}
             </h3>
-            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
+            <ul className="list-none pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-2">
               {uniqueUnavailable.map((name) => (
-                <li key={name}>{name}</li>
+                <li key={name}>
+                  <span
+                    className="text-muted-foreground -ml-5 mr-0 shrink-0 select-none"
+                    aria-hidden
+                  >
+                    •
+                  </span>
+                  {name}
+                </li>
               ))}
             </ul>
           </section>
@@ -155,9 +171,17 @@ export function DayDetailContent({
             >
               {t("event_type.vacation")}
             </h3>
-            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
+            <ul className="list-none pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-2">
               {uniqueVacation.map((name) => (
-                <li key={name}>{name}</li>
+                <li key={name}>
+                  <span
+                    className="text-muted-foreground -ml-5 mr-0 shrink-0 select-none"
+                    aria-hidden
+                  >
+                    •
+                  </span>
+                  {name}
+                </li>
               ))}
             </ul>
           </section>
@@ -174,9 +198,17 @@ export function DayDetailContent({
             >
               {t("hint.events")}
             </h3>
-            <ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
+            <ul className="list-none pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-2">
               {summaries.map((s) => (
-                <li key={String(s)}>{String(s)}</li>
+                <li key={String(s)}>
+                  <span
+                    className="text-muted-foreground -ml-5 mr-0 shrink-0 select-none"
+                    aria-hidden
+                  >
+                    •
+                  </span>
+                  {String(s)}
+                </li>
               ))}
             </ul>
           </section>