TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2024-11-25 19:15:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

client/web: small tweaks for small screens

Browse Source 
Add left and right padding around entire client so that the cards don't
run into the side of the screen. Also tighten up vertical spacing in
couple of places.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>
This commit is contained in:
Will Norris 2023-12-04 14:58:18 -08:00 committed by Will Norris
parent c4ccdd1bd1
commit c5208f8138
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/web/index.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" type="text/css" href="/src/index.css" /> <link rel="stylesheet" type="text/css" href="/src/index.css" />
<link rel="preload" as="font" href="/src/assets/fonts/Inter.var.latin.woff2" type="font/woff2" crossorigin /> <link rel="preload" as="font" href="/src/assets/fonts/Inter.var.latin.woff2" type="font/woff2" crossorigin />
</head> </head>
<body> <body class="px-2">
<noscript> <noscript>
<p class="mb-2">You need to enable Javascript to access the Tailscale web client.</p> <p class="mb-2">You need to enable Javascript to access the Tailscale web client.</p>
<p>If you need any help, feel free to <a href="mailto:support+webclient@tailscale.com" class="link">contact us</a>.</p> <p>If you need any help, feel free to <a href="mailto:support+webclient@tailscale.com" class="link">contact us</a>.</p>

4
client/web/src/components/app.tsx
View File

@ -22,7 +22,7 @@ export default function App() {
const { data: auth, loading: loadingAuth, newSession } = useAuth() const { data: auth, loading: loadingAuth, newSession } = useAuth()
return ( return (
<main className="min-w-sm max-w-lg mx-auto py-14 px-5"> <main className="min-w-sm max-w-lg mx-auto py-4 md:py-14 px-5">
{loadingAuth || !auth ? ( {loadingAuth || !auth ? (
<div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
) : ( ) : (
@ -140,7 +140,7 @@ function Header({
return ( return (
<> <>
<div className="flex justify-between items-center mb-12"> <div className="flex justify-between items-center mb-9 md:mb-12">
<div className="flex gap-3"> <div className="flex gap-3">
<TailscaleIcon <TailscaleIcon
className="cursor-pointer" className="cursor-pointer"