fix(frontend): stabilize multiselect behavior and UI spacing (#154)

* fix(frontend): left-align announcement logo in homepage banner

* fix(frontend): keep multiselect panels floating and preserve summaries

* fix(frontend): rebalance config card header spacing

* fix(frontend): normalize formatting and fix multiselect modal behavior

* fix(frontend): restore config divider spacing on desktop

vite-frontend/src/pages/dashboard/components/announcement-banner.tsx

@@ -16,7 +16,7 @@ export const AnnouncementBanner = ({
   return (
     <Card className="mb-4 lg:mb-6 border border-blue-200 dark:border-blue-500/30 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-500/10 dark:to-purple-500/10">
       <CardBody className="p-4">
-        <div className="flex items-start gap-3">
+        <div className="flex items-center justify-start gap-3">
           <div className="p-2 bg-blue-100 dark:bg-blue-500/20 rounded-lg flex-shrink-0">
             <svg
               aria-hidden="true"

vite-frontend/src/pages/dashboard/components/flow-chart-card.tsx

@@ -1,4 +1,3 @@
-import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import {
   CartesianGrid,
   Line,
@@ -9,6 +8,7 @@ import {
   YAxis,
 } from "recharts";
 
+import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { PageEmptyState } from "@/components/page-state";
 
 interface FlowChartPoint {

vite-frontend/src/pages/dashboard/use-dashboard-data.ts

@@ -1,3 +1,5 @@
+import type { ForwardApiItem } from "@/api/types";
+
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 
@@ -6,7 +8,6 @@ import {
   getUserPackageInfo,
   type AnnouncementData,
 } from "@/api";
-import type { ForwardApiItem } from "@/api/types";
 import { getAdminFlag } from "@/utils/session";
 
 export interface DashboardUserInfo {
@@ -180,9 +181,13 @@ export const useDashboardData = (): DashboardDataState => {
   );
   const [userTunnels, setUserTunnels] = useState<DashboardUserTunnel[]>([]);
   const [forwardList, setForwardList] = useState<DashboardForward[]>([]);
-  const [statisticsFlows, setStatisticsFlows] = useState<DashboardStatisticsFlow[]>([]);
+  const [statisticsFlows, setStatisticsFlows] = useState<
+    DashboardStatisticsFlow[]
+  >([]);
   const [isAdmin, setIsAdmin] = useState(false);
-  const [announcement, setAnnouncement] = useState<AnnouncementData | null>(null);
+  const [announcement, setAnnouncement] = useState<AnnouncementData | null>(
+    null,
+  );
 
   useEffect(() => {
     const loadAnnouncement = async () => {
@@ -214,7 +219,10 @@ export const useDashboardData = (): DashboardDataState => {
           setForwardList(normalizedForwards);
           setStatisticsFlows(data.statisticsFlows || []);
 
-          checkExpirationNotifications(data.userInfo, normalizedTunnelPermissions);
+          checkExpirationNotifications(
+            data.userInfo,
+            normalizedTunnelPermissions,
+          );
         } else {
           toast.error(res.msg || "获取套餐信息失败");
         }