fix: inline card mobile display

This commit is contained in:
hamster1963 2024-12-06 10:06:28 +08:00
parent 560bcea0b8
commit 229d395143
4 changed files with 13 additions and 11 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -28,12 +28,12 @@
"clsx": "^2.1.1",
"country-flag-icons": "^1.5.13",
"d3-geo": "^3.1.1",
"framer-motion": "^11.13.1",
"framer-motion": "^12.0.0-alpha.2",
"i18next": "^24.0.5",
"lucide-react": "^0.460.0",
"luxon": "^3.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-i18next": "^15.1.3",
"react-router-dom": "^7.0.2",
"recharts": "^2.14.1",
@ -45,18 +45,18 @@
"devDependencies": {
"@eslint/js": "^9.16.0",
"@types/node": "^22.10.1",
"@types/react": "^18.3.13",
"@types/react-dom": "^18.3.1",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react-swc": "^3.7.2",
"autoprefixer": "^10.4.20",
"eslint": "^9.16.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.13.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.16",
"typescript": "~5.6.3",
"typescript-eslint": "^8.17.0",
"vite": "^6.0.2"
"vite": "^6.0.3"
}
}

View File

@ -17,6 +17,7 @@ import {
MageMicrosoftWindows,
} from "@/lib/logo-class";
import { formatBytes } from "@/lib/format";
import { Separator } from "./ui/separator";
export default function ServerCardInline({
now,
@ -70,7 +71,7 @@ export default function ServerCardInline({
onClick={() => navigate(`/server/${serverInfo.id}`)}
>
<section
className={cn("grid items-center gap-2 lg:w-40")}
className={cn("grid items-center gap-2 lg:w-36")}
style={{ gridTemplateColumns: "auto auto 1fr" }}
>
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
@ -82,7 +83,7 @@ export default function ServerCardInline({
>
{showFlag ? <ServerFlag country_code={country_code} /> : null}
</div>
<div className="relative w-24 flex flex-col">
<div className="relative w-28 flex flex-col">
<p
className={cn(
"break-all font-bold tracking-tight",
@ -107,6 +108,7 @@ export default function ServerCardInline({
))}
</div>
</section>
<Separator orientation="vertical" className="h-8 mx-0 ml-2" />
<div className="flex flex-col gap-2">
<section className={cn("grid grid-cols-9 items-center gap-3 flex-1")}>
<div
@ -226,7 +228,7 @@ export default function ServerCardInline({
<div className="relative">
<p
className={cn(
"break-all font-bold w-24 tracking-tight",
"break-all font-bold w-28 tracking-tight",
showFlag ? "text-xs" : "text-sm",
)}
>

View File

@ -13,7 +13,7 @@ export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({
const [lastMessage, setLastMessage] = useState<{ data: string } | null>(null);
const [connected, setConnected] = useState(false);
const ws = useRef<WebSocket | null>(null);
const reconnectTimeout = useRef<NodeJS.Timeout>();
const reconnectTimeout = useRef<NodeJS.Timeout>(null);
const maxReconnectAttempts = 30;
const reconnectAttempts = useRef(0);