Update formatting

13 files changed, 154 insertions, 107 deletions

diff --git a/src/frontend/app/components/LineIcon.tsx b/src/frontend/app/components/LineIcon.tsx
index fc40824..8bbeb20 100644
--- a/src/frontend/app/components/LineIcon.tsx
+++ b/src/frontend/app/components/LineIcon.tsx
@@ -6,13 +6,10 @@ interface LineIconProps {
   mode?: "rounded" | "pill" | "default";
 }
 
-const LineIcon: React.FC<LineIconProps> = ({
-  line,
-  mode = "default",
-}) => {
+const LineIcon: React.FC<LineIconProps> = ({ line, mode = "default" }) => {
   const actualLine = useMemo(() => {
-    return line.trim().replace('510', 'NAD');
-  }, [line])
+    return line.trim().replace("510", "NAD");
+  }, [line]);
 
   const formattedLine = useMemo(() => {
     return /^[a-zA-Z]/.test(actualLine) ? actualLine : `L${actualLine}`;
diff --git a/src/frontend/app/components/StopGallery.tsx b/src/frontend/app/components/StopGallery.tsx
index a45bfca..8c13aa1 100644
--- a/src/frontend/app/components/StopGallery.tsx
+++ b/src/frontend/app/components/StopGallery.tsx
@@ -36,7 +36,9 @@ const StopGallery: React.FC<StopGalleryProps> = ({
   if (stops.length === 0 && emptyMessage) {
     return (
       <div className="w-full px-4 flex flex-col gap-2">
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </h3>
         <div className="text-center">
           <p className="text-sm px-4 py-3 bg-gray-100 dark:bg-gray-800 rounded-lg">
             {emptyMessage}
@@ -52,15 +54,17 @@ const StopGallery: React.FC<StopGalleryProps> = ({
 
   return (
     <div className="w-full px-4 flex flex-col gap-2">
-      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+        {title}
+      </h3>
 
       <div
         ref={scrollRef}
         className="overflow-x-auto overflow-y-hidden snap-x snap-mandatory scrollbar-hide pb-2"
         style={{
-          WebkitOverflowScrolling: 'touch',
-          scrollbarWidth: 'none',
-          msOverflowStyle: 'none'
+          WebkitOverflowScrolling: "touch",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
         }}
       >
         <div className="flex gap-3">
@@ -73,8 +77,11 @@ const StopGallery: React.FC<StopGalleryProps> = ({
         {stops.map((_, index) => (
           <span
             key={index}
-            className={`w-1.5 h-1.5 rounded-full transition-colors duration-200 ${index === activeIndex ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-700"
-              }`}
+            className={`w-1.5 h-1.5 rounded-full transition-colors duration-200 ${
+              index === activeIndex
+                ? "bg-blue-600"
+                : "bg-gray-300 dark:bg-gray-700"
+            }`}
           ></span>
         ))}
       </div>
diff --git a/src/frontend/app/components/StopGalleryItem.tsx b/src/frontend/app/components/StopGalleryItem.tsx
index 6c80362..bf60697 100644
--- a/src/frontend/app/components/StopGalleryItem.tsx
+++ b/src/frontend/app/components/StopGalleryItem.tsx
@@ -22,7 +22,9 @@ const StopGalleryItem: React.FC<StopGalleryItemProps> = ({ stop }) => {
         to={`/stops/${stop.stopId}`}
       >
         <div className="flex items-center gap-2 mb-1">
-          {stop.favourite && <span className="text-yellow-500 text-base">★</span>}
+          {stop.favourite && (
+            <span className="text-yellow-500 text-base">★</span>
+          )}
           <span className="text-xs text-gray-600 dark:text-gray-400 font-medium">
             ({stop.stopId})
           </span>
@@ -30,10 +32,10 @@ const StopGalleryItem: React.FC<StopGalleryItemProps> = ({ stop }) => {
         <div
           className="text-[0.95rem] font-semibold mb-2 leading-snug line-clamp-2 min-h-[2.5em]"
           style={{
-            display: '-webkit-box',
+            display: "-webkit-box",
             WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden'
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
           }}
         >
           {StopDataProvider.getDisplayName(stop)}
diff --git a/src/frontend/app/components/StopHelpModal.tsx b/src/frontend/app/components/StopHelpModal.tsx
index 87e02f9..e8157ab 100644
--- a/src/frontend/app/components/StopHelpModal.tsx
+++ b/src/frontend/app/components/StopHelpModal.tsx
@@ -21,9 +21,7 @@ export const StopHelpModal: React.FC<StopHelpModalProps> = ({
         <Sheet.Content>
           <div className="p-6 pb-10 flex flex-col gap-8 overflow-y-auto max-h-[80vh] text-slate-900 dark:text-slate-100">
             <div>
-              <h2 className="text-xl font-bold mb-4">
-                {t("stop_help.title")}
-              </h2>
+              <h2 className="text-xl font-bold mb-4">{t("stop_help.title")}</h2>
 
               <div className="space-y-5">
                 <div className="flex gap-4 items-start">
diff --git a/src/frontend/app/components/StopMapModal.tsx b/src/frontend/app/components/StopMapModal.tsx
index 55ad848..1cb6d88 100644
--- a/src/frontend/app/components/StopMapModal.tsx
+++ b/src/frontend/app/components/StopMapModal.tsx
@@ -1,11 +1,12 @@
 import maplibregl from "maplibre-gl";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import Map, {
-  Layer,
-  Marker,
-  Source,
-  type MapRef
-} from "react-map-gl/maplibre";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Map, { Layer, Marker, Source, type MapRef } from "react-map-gl/maplibre";
 import { Sheet } from "react-modal-sheet";
 import { useApp } from "~/AppContext";
 import { REGION_DATA } from "~/config/RegionConfig";
@@ -161,7 +162,7 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
           maxZoom: 17,
         } as any);
       }
-    } catch { }
+    } catch {}
   }, [stop, selectedBus, shapeData, previousShapeData]);
 
   // Load style without traffic layers for the stop map
@@ -337,11 +338,7 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
   }
 
   return (
-    <Sheet
-      isOpen={isOpen}
-      onClose={onClose}
-      detent="content"
-    >
+    <Sheet isOpen={isOpen} onClose={onClose} detent="content">
       <Sheet.Container style={{ backgroundColor: "var(--background-color)" }}>
         <Sheet.Header />
         <Sheet.Content disableDrag={true}>
@@ -358,7 +355,11 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
                   }}
                   style={{ width: "100%", height: "50vh" }}
                   mapStyle={styleSpec}
-                  attributionControl={{ compact: false, customAttribution: "Concello de Vigo & Viguesa de Transportes SL" }}
+                  attributionControl={{
+                    compact: false,
+                    customAttribution:
+                      "Concello de Vigo & Viguesa de Transportes SL",
+                  }}
                   ref={mapRef}
                   interactive={true}
                   onMove={(e) => {
diff --git a/src/frontend/app/components/StopSummarySheet.tsx b/src/frontend/app/components/StopSummarySheet.tsx
index e85dda3..55cbbd8 100644
--- a/src/frontend/app/components/StopSummarySheet.tsx
+++ b/src/frontend/app/components/StopSummarySheet.tsx
@@ -102,10 +102,10 @@ export const StopSheet: React.FC<StopSheetProps> = ({
   // Show only the next 4 arrivals
   const sortedData = data
     ? [...data].sort(
-      (a, b) =>
-        (a.realTime?.minutes ?? a.schedule?.minutes ?? 999) -
-        (b.realTime?.minutes ?? b.schedule?.minutes ?? 999)
-    )
+        (a, b) =>
+          (a.realTime?.minutes ?? a.schedule?.minutes ?? 999) -
+          (b.realTime?.minutes ?? b.schedule?.minutes ?? 999)
+      )
     : [];
   const limitedEstimates = sortedData.slice(0, 4);
 
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css
index 9922b03..935c06d 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css
@@ -1,4 +1,4 @@
-@import '../../tailwind.css';
+@import "../../tailwind.css";
 
 .consolidated-circulation-card {
   all: unset;
@@ -40,7 +40,6 @@
   pointer-events: none;
 }
 
-
 .consolidated-circulation-card .card-row {
   display: flex;
   align-items: center;
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
index 70a9355..3fa984b 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import Marquee from 'react-fast-marquee';
+import Marquee from "react-fast-marquee";
 import { useTranslation } from "react-i18next";
 import LineIcon from "~components/LineIcon";
 import { type ConsolidatedCirculation } from "~routes/stops-$id";
@@ -109,7 +109,10 @@ const AutoMarquee = ({ text }: { text: string }) => {
   }
 
   return (
-    <div ref={containerRef} className="w-full overflow-hidden text-sm font-mono truncate">
+    <div
+      ref={containerRef}
+      className="w-full overflow-hidden text-sm font-mono truncate"
+    >
       {text}
     </div>
   );
@@ -175,9 +178,11 @@ export const ConsolidatedCirculationCard: React.FC<
       const tone =
         delta <= 2 ? "delay-ok" : delta <= 10 ? "delay-warn" : "delay-critical";
       return {
-        label: reduced ? `R${delta}` : t("estimates.delay_positive", {
-          minutes: delta,
-        }),
+        label: reduced
+          ? `R${delta}`
+          : t("estimates.delay_positive", {
+              minutes: delta,
+            }),
         tone,
         kind: "delay",
       } as const;
@@ -186,22 +191,28 @@ export const ConsolidatedCirculationCard: React.FC<
     // Early
     const tone = absDelta <= 2 ? "delay-ok" : "delay-early";
     return {
-      label: reduced ? `A${absDelta}` : t("estimates.delay_negative", {
-        minutes: absDelta,
-      }),
+      label: reduced
+        ? `A${absDelta}`
+        : t("estimates.delay_negative", {
+            minutes: absDelta,
+          }),
       tone,
       kind: "delay",
     } as const;
   }, [estimate.schedule, estimate.realTime, t, reduced]);
 
   const metaChips = useMemo(() => {
-    const chips: Array<{ label: string; tone?: string, kind?: "regular" | "gps" | "delay" | "warning" }> = [];
+    const chips: Array<{
+      label: string;
+      tone?: string;
+      kind?: "regular" | "gps" | "delay" | "warning";
+    }> = [];
 
     if (delayChip) {
       chips.push(delayChip);
     }
 
-    if (estimate.schedule && driver !== 'renfe') {
+    if (estimate.schedule && driver !== "renfe") {
       chips.push({
         label: `${parseServiceId(estimate.schedule.serviceId)} · ${getTripIdDisplay(
           estimate.schedule.tripId
@@ -211,7 +222,10 @@ export const ConsolidatedCirculationCard: React.FC<
     }
 
     if (estimate.realTime && estimate.realTime.distance >= 0) {
-      chips.push({ label: formatDistance(estimate.realTime.distance), kind: "regular" });
+      chips.push({
+        label: formatDistance(estimate.realTime.distance),
+        kind: "regular",
+      });
     }
 
     if (estimate.currentPosition) {
@@ -243,7 +257,7 @@ export const ConsolidatedCirculationCard: React.FC<
 
   // Check if bus has GPS position (live tracking)
   const hasGpsPosition = !!estimate.currentPosition;
-  const isRenfe = driver === 'renfe';
+  const isRenfe = driver === "renfe";
   const isClickable = hasGpsPosition;
   const looksDisabled = !isClickable && !isRenfe;
 
@@ -251,10 +265,10 @@ export const ConsolidatedCirculationCard: React.FC<
   const interactiveProps = readonly
     ? {}
     : {
-      onClick: isClickable ? onMapClick : undefined,
-      type: "button" as const,
-      disabled: !isClickable,
-    };
+        onClick: isClickable ? onMapClick : undefined,
+        type: "button" as const,
+        disabled: !isClickable,
+      };
 
   if (reduced) {
     return (
@@ -263,15 +277,16 @@ export const ConsolidatedCirculationCard: React.FC<
           flex-none flex items-center gap-2.5 min-h-12
           bg-(--message-background-color) border border-(--border-color)
           rounded-xl px-3 py-2.5 transition-all
-          ${readonly
-            ? looksDisabled
-              ? "opacity-70 cursor-not-allowed"
-              : ""
-            : isClickable
-              ? "cursor-pointer hover:shadow-[0_4px_14px_rgba(0,0,0,0.08)] hover:border-(--button-background-color) hover:bg-[color-mix(in_oklab,var(--button-background-color)_5%,var(--message-background-color))] active:scale-[0.98]"
-              : looksDisabled
+          ${
+            readonly
+              ? looksDisabled
                 ? "opacity-70 cursor-not-allowed"
                 : ""
+              : isClickable
+                ? "cursor-pointer hover:shadow-[0_4px_14px_rgba(0,0,0,0.08)] hover:border-(--button-background-color) hover:bg-[color-mix(in_oklab,var(--button-background-color)_5%,var(--message-background-color))] active:scale-[0.98]"
+                : looksDisabled
+                  ? "opacity-70 cursor-not-allowed"
+                  : ""
           }
         `.trim()}
         {...interactiveProps}
@@ -281,8 +296,10 @@ export const ConsolidatedCirculationCard: React.FC<
         </div>
         <div className="flex-1 min-w-0 flex flex-col gap-1">
           <strong className="text-base text-(--text-color) overflow-hidden text-ellipsis line-clamp-2 leading-tight">
-            {driver === 'renfe' && estimate.schedule?.tripId && (
-              <span className="font-mono text-slate-500 mr-1.5 text-sm">{estimate.schedule.tripId}</span>
+            {driver === "renfe" && estimate.schedule?.tripId && (
+              <span className="font-mono text-slate-500 mr-1.5 text-sm">
+                {estimate.schedule.tripId}
+              </span>
             )}
             {estimate.route}
           </strong>
@@ -292,22 +309,28 @@ export const ConsolidatedCirculationCard: React.FC<
                 let chipColourClasses = "";
                 switch (chip.tone) {
                   case "delay-ok":
-                    chipColourClasses = "bg-green-600/20 dark:bg-green-600/30 text-green-700 dark:text-green-300";
+                    chipColourClasses =
+                      "bg-green-600/20 dark:bg-green-600/30 text-green-700 dark:text-green-300";
                     break;
                   case "delay-warn":
-                    chipColourClasses = "bg-amber-600/20 dark:bg-yellow-600/30 text-amber-700 dark:text-yellow-300";
+                    chipColourClasses =
+                      "bg-amber-600/20 dark:bg-yellow-600/30 text-amber-700 dark:text-yellow-300";
                     break;
                   case "delay-critical":
-                    chipColourClasses = "bg-red-400/20 dark:bg-red-600/30 text-red-600 dark:text-red-300";
+                    chipColourClasses =
+                      "bg-red-400/20 dark:bg-red-600/30 text-red-600 dark:text-red-300";
                     break;
                   case "delay-early":
-                    chipColourClasses = "bg-blue-400/20 dark:bg-blue-600/30 text-blue-700 dark:text-blue-300";
+                    chipColourClasses =
+                      "bg-blue-400/20 dark:bg-blue-600/30 text-blue-700 dark:text-blue-300";
                     break;
                   case "warning":
-                    chipColourClasses = "bg-orange-400/20 dark:bg-orange-600/30 text-orange-700 dark:text-orange-300";
+                    chipColourClasses =
+                      "bg-orange-400/20 dark:bg-orange-600/30 text-orange-700 dark:text-orange-300";
                     break;
                   default:
-                    chipColourClasses = "bg-black/[0.06] dark:bg-white/[0.12] text-[var(--text-color)]";
+                    chipColourClasses =
+                      "bg-black/[0.06] dark:bg-white/[0.12] text-[var(--text-color)]";
                 }
 
                 return (
@@ -315,8 +338,12 @@ export const ConsolidatedCirculationCard: React.FC<
                     key={`${chip.label}-${idx}`}
                     className={`text-xs px-2 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 ${chipColourClasses}`}
                   >
-                    {chip.kind === "gps" && (<LocateIcon className="w-3 h-3 inline-block" />)}
-                    {chip.kind === "warning" && (<AlertTriangle className="w-3 h-3 inline-block" />)}
+                    {chip.kind === "gps" && (
+                      <LocateIcon className="w-3 h-3 inline-block" />
+                    )}
+                    {chip.kind === "warning" && (
+                      <AlertTriangle className="w-3 h-3 inline-block" />
+                    )}
                     {chip.label}
                   </span>
                 );
@@ -327,17 +354,20 @@ export const ConsolidatedCirculationCard: React.FC<
         <div
           className={`
             inline-flex items-center justify-center px-2 py-1.5 rounded-xl shrink-0
-            ${timeClass === "time-running"
-              ? "bg-green-600/20 dark:bg-green-600/25 text-[#1a9e56] dark:text-[#22c55e]"
-              : timeClass === "time-delayed"
-                ? "bg-orange-600/20 dark:bg-orange-600/25 text-[#d06100] dark:text-[#fb923c]"
-                : "bg-blue-900/20 dark:bg-blue-600/25 text-[#0b3d91] dark:text-[#93c5fd]"
+            ${
+              timeClass === "time-running"
+                ? "bg-green-600/20 dark:bg-green-600/25 text-[#1a9e56] dark:text-[#22c55e]"
+                : timeClass === "time-delayed"
+                  ? "bg-orange-600/20 dark:bg-orange-600/25 text-[#d06100] dark:text-[#fb923c]"
+                  : "bg-blue-900/20 dark:bg-blue-600/25 text-[#0b3d91] dark:text-[#93c5fd]"
             }
           `.trim()}
         >
           <div className="flex flex-col items-center leading-none">
             <span className="text-lg font-bold leading-none">{etaValue}</span>
-            <span className="text-[0.65rem] uppercase tracking-wider mt-0.5 opacity-90">{etaUnit}</span>
+            <span className="text-[0.65rem] uppercase tracking-wider mt-0.5 opacity-90">
+              {etaUnit}
+            </span>
           </div>
         </div>
       </Tag>
@@ -346,16 +376,17 @@ export const ConsolidatedCirculationCard: React.FC<
 
   return (
     <Tag
-      className={`consolidated-circulation-card ${readonly
-        ? looksDisabled
-          ? "no-gps"
-          : ""
-        : isClickable
-          ? "has-gps"
-          : looksDisabled
+      className={`consolidated-circulation-card ${
+        readonly
+          ? looksDisabled
             ? "no-gps"
             : ""
-        }`}
+          : isClickable
+            ? "has-gps"
+            : looksDisabled
+              ? "no-gps"
+              : ""
+      }`}
       {...interactiveProps}
     >
       <>
@@ -365,8 +396,10 @@ export const ConsolidatedCirculationCard: React.FC<
           </div>
           <div className="route-info">
             <strong className="uppercase">
-              {driver === 'renfe' && estimate.schedule?.tripId && (
-                <span className="font-mono text-slate-500 mr-2 text-[0.9em]">{estimate.schedule.tripId}</span>
+              {driver === "renfe" && estimate.schedule?.tripId && (
+                <span className="font-mono text-slate-500 mr-2 text-[0.9em]">
+                  {estimate.schedule.tripId}
+                </span>
               )}
               {estimate.route}
             </strong>
@@ -389,8 +422,12 @@ export const ConsolidatedCirculationCard: React.FC<
                 key={`${chip.label}-${idx}`}
                 className={`meta-chip ${chip.tone ?? ""}`.trim()}
               >
-                {chip.kind === "gps" && (<LocateIcon className="w-3 h-3 inline-block" />)}
-                {chip.kind === "warning" && (<AlertTriangle className="w-3 h-3 inline-block" />)}
+                {chip.kind === "gps" && (
+                  <LocateIcon className="w-3 h-3 inline-block" />
+                )}
+                {chip.kind === "warning" && (
+                  <AlertTriangle className="w-3 h-3 inline-block" />
+                )}
                 {chip.label}
               </span>
             ))}
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
index ec79f1c..eea4582 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
@@ -7,17 +7,17 @@ import "./ConsolidatedCirculationList.css";
 
 interface ConsolidatedCirculationListProps {
   data: ConsolidatedCirculation[];
-  onCirculationClick?: (estimate: ConsolidatedCirculation, index: number) => void;
+  onCirculationClick?: (
+    estimate: ConsolidatedCirculation,
+    index: number
+  ) => void;
   reduced?: boolean;
   driver?: string;
 }
 
-export const ConsolidatedCirculationList: React.FC<ConsolidatedCirculationListProps> = ({
-  data,
-  onCirculationClick,
-  reduced,
-  driver,
-}) => {
+export const ConsolidatedCirculationList: React.FC<
+  ConsolidatedCirculationListProps
+> = ({ data, onCirculationClick, reduced, driver }) => {
   const { t } = useTranslation();
 
   const sortedData = [...data].sort(
diff --git a/src/frontend/app/components/ThemeColorManager.tsx b/src/frontend/app/components/ThemeColorManager.tsx
index c138dc9..eba0471 100644
--- a/src/frontend/app/components/ThemeColorManager.tsx
+++ b/src/frontend/app/components/ThemeColorManager.tsx
@@ -9,11 +9,11 @@ export const ThemeColorManager = () => {
 
     let meta = document.querySelector('meta[name="theme-color"]');
     if (!meta) {
-      meta = document.createElement('meta');
-      meta.setAttribute('name', 'theme-color');
+      meta = document.createElement("meta");
+      meta.setAttribute("name", "theme-color");
       document.head.appendChild(meta);
     }
-    meta.setAttribute('content', color);
+    meta.setAttribute("content", color);
   }, [resolvedTheme]);
 
   return null;
diff --git a/src/frontend/app/components/layout/AppShell.tsx b/src/frontend/app/components/layout/AppShell.tsx
index 91f6c0d..08aee59 100644
--- a/src/frontend/app/components/layout/AppShell.tsx
+++ b/src/frontend/app/components/layout/AppShell.tsx
@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import { Outlet } from "react-router";
-import { PageTitleProvider, usePageTitleContext } from "~/contexts/PageTitleContext";
+import {
+  PageTitleProvider,
+  usePageTitleContext,
+} from "~/contexts/PageTitleContext";
 import { ThemeColorManager } from "../ThemeColorManager";
 import "./AppShell.css";
 import { Drawer } from "./Drawer";
diff --git a/src/frontend/app/components/layout/Drawer.css b/src/frontend/app/components/layout/Drawer.css
index 27ccce6..4f6bd5f 100644
--- a/src/frontend/app/components/layout/Drawer.css
+++ b/src/frontend/app/components/layout/Drawer.css
@@ -8,7 +8,9 @@
   z-index: 99;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease;
 }
 
 .drawer-overlay.open {
diff --git a/src/frontend/app/components/layout/NavBar.tsx b/src/frontend/app/components/layout/NavBar.tsx
index 0ac6a71..40591c4 100644
--- a/src/frontend/app/components/layout/NavBar.tsx
+++ b/src/frontend/app/components/layout/NavBar.tsx
@@ -57,7 +57,7 @@ export default function NavBar({ orientation = "horizontal" }: NavBarProps) {
               updateMapState(coords, 16);
             }
           },
-          () => { },
+          () => {},
           {
             enableHighAccuracy: false,
             maximumAge: 5 * 60 * 1000,
@@ -70,13 +70,14 @@ export default function NavBar({ orientation = "horizontal" }: NavBarProps) {
       name: t("navbar.lines", "Líneas"),
       icon: Route,
       path: "/lines",
-    }
+    },
   ];
 
   return (
     <nav
-      className={`${styles.navBar} ${orientation === "vertical" ? styles.vertical : ""
-        }`}
+      className={`${styles.navBar} ${
+        orientation === "vertical" ? styles.vertical : ""
+      }`}
     >
       {navItems.map((item) => {
         const Icon = item.icon;