feat: Enhance UI components with full labels and abbreviations, and add port mapping to dev docker-compose.

src/components/TuiSegment.astro

@@ -2,6 +2,7 @@
 interface Props {
     id: string;
     label: string;
+    abbr?: string;
     options: string[];
     value?: string;
     title?: string;
@@ -11,6 +12,7 @@ interface Props {
 const {
     id,
     label,
+    abbr,
     options,
     value = options[0],
     title = "",
@@ -24,7 +26,10 @@ const {
     data-tooltip-title={title}
     data-tooltip-desc={description}
 >
-    <span class="tui-segment-label">{label}</span>
+    <span class:list={["tui-segment-label", { "has-abbr": !!abbr }]}>
+        <span class="full">{label}</span>
+        {abbr && <span class="abbr">{abbr}</span>}
+    </span>
     <div class="tui-segment-options" id={id} data-value={value}>
         {
             options.map((opt) => (
@@ -56,8 +61,23 @@ const {
         min-width: 3ch;
         font-weight: 700;
         font-family: var(--font-mono);
-        color: rgba(255, 255, 255, 0.4);
+        color: #fff;
         opacity: 0.7;
+        display: flex;
+        transition: all 0.2s;
+    }
+
+    .tui-segment-label .abbr {
+        display: none;
+    }
+
+    @media (max-width: 1400px) {
+        .tui-segment-label.has-abbr .full {
+            display: none;
+        }
+        .tui-segment-label.has-abbr .abbr {
+            display: inline;
+        }
     }
 
     .tui-segment-options {
@@ -72,7 +92,8 @@ const {
         background: transparent;
         border: none;
         border-right: 1px solid rgba(255, 255, 255, 0.05);
-        color: rgba(255, 255, 255, 0.5);
+        color: #fff;
+        opacity: 0.6;
         font-family: inherit;
         font-size: inherit;
         padding: 4px 10px;
@@ -87,24 +108,26 @@ const {
     }
 
     .tui-segment-option:hover {
-        color: #fff;
-        background: rgba(255, 255, 255, 0.05);
+        color: var(--accent-color);
+        opacity: 1;
+        background: color-mix(in srgb, var(--accent-color), transparent 95%);
     }
 
     .tui-segment-option.active {
-        background: rgba(255, 255, 255, 0.15);
+        background: var(--accent-color);
         color: #fff;
-        font-weight: 600;
+        font-weight: 700;
+        opacity: 1;
     }
 
     /* Hover the whole group */
     .tui-segment:hover .tui-segment-label {
         opacity: 1;
-        color: rgba(255, 255, 255, 0.8);
+        color: var(--accent-color);
     }
 
     .tui-segment:hover .tui-segment-options {
-        border-color: rgba(255, 255, 255, 0.2);
+        border-color: var(--accent-color);
     }
 </style>