client/web: small tweaks for small screens

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>
2 years ago · c5208f8138
parent c4ccdd1bd1
commit c5208f8138
2 changed files with 3 additions and 3 deletions
--- a/client/web/index.html
+++ b/client/web/index.html
@ -8,7 +8,7 @@
    <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 />
  </head>
-  <body>
+  <body class="px-2">
    <noscript>
      <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>
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@ -22,7 +22,7 @@ export default function App() {
  const { data: auth, loading: loadingAuth, newSession } = useAuth()

  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 ? (
        <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
      ) : (
@ -140,7 +140,7 @@ function Header({

  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">
          <TailscaleIcon
            className="cursor-pointer"