frontend: have better margins everywhere

frontend/src/components/Layout.module.css

@@ -14,9 +14,10 @@
  */
 
 .container {
-    width: 378px;
-    margin: var(--cpd-space-10x) auto var(--cpd-space-6x) auto;
-    padding-bottom: var(--cpd-space-10x)
+    box-sizing: border-box;
+    max-width: calc(378px + var(--cpd-space-6x) * 2);
+    margin: 0 auto;
+    padding: var(--cpd-space-6x);
 }
 
 .footer {

templates/components/navbar.html

@@ -15,7 +15,7 @@ limitations under the License.
 #}
 
 {% macro top() %}
-  <nav class="container mx-auto py-2 flex-initial flex items-center px-2" role="navigation" aria-label="main navigation">
+  <nav class="container mx-auto py-2 flex-initial flex items-center px-8" role="navigation" aria-label="main navigation">
     <div class="flex-1"></div>
 
     <div class="grid grid-flow-col auto-cols-max gap-4 place-items-center">

templates/pages/account/emails/add.html

@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex items-center justify-center flex-1">
-    <form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <div class="text-center">
         <h1 class="text-lg text-center font-medium">Add an email address</h1>
       </div>

templates/pages/account/emails/verify.html

@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex items-center justify-center flex-1">
-    <form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <div class="text-center">
         <h1 class="text-lg text-center font-medium">Email verification</h1>
         <p>Please enter the 6-digit code sent to: <span class="font-semibold">{{ email.email }}</span></p>

templates/pages/account/password.html

@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   {{ navbar::top() }}
-  <section class="container mx-auto grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 p-2">
+  <section class="container mx-auto grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 py-2 px-8">
     <form class="rounded border-2 border-grey-50 dark:border-grey-450 p-4 grid gap-4 xl:grid-cols-2 grid-cols-1 place-content-start" method="POST">
       <h2 class="text-xl font-semibold xl:col-span-2">Change my password</h2>
       <input type="hidden" name="csrf" value="{{ csrf_token }}" />

templates/pages/index.html

@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex-1 flex flex-col items-center justify-center">
-    <div>
+    <div class="my-2 mx-8">
       <h1 class="my-2 text-5xl font-semibold leading-tight">Matrix Authentication Service</h1>
       <p class="text-lg">
         OpenID Connect discovery document:

templates/pages/login.html

@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       {% if not password_disabled %}
         {% if next and next.kind == "link_upstream" %}
           <div class="text-center">

templates/pages/policy_violation.html

@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <div class="w-96 m-2">
+    <div class="w-96 my-2 mx-8">
       <div class="grid grid-cols-1 gap-6">
         <h1 class="text-xl font-semibold">The authorization request was denied the policy enforced by this service.</h1>
         <p>This might be because of the client which authored the request, the currently logged in user, or the request itself.</p>

templates/pages/reauth.html

@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <div class="w-96 m-4">
+    <div class="w-96 my-2 mx-8">
       <form method="POST" class="grid grid-cols-1 gap-6">
         <div class="text-center">
           <h1 class="text-lg text-center font-medium">Hi {{ current_session.user.username }}</h1>

templates/pages/register.html

@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <form method="POST" class="grid grid-cols-1 gap-6 w-96">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <div class="text-center">
         <h1 class="text-lg text-center font-medium">Create an account</h1>
         <p>Please create an account to get started:</p>

templates/pages/upstream_oauth2/do_register.html

@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <div class="grid grid-cols-1 gap-6 w-96">
+    <div class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <form method="POST" class="grid grid-cols-1 gap-6">
         <h1 class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 text-center font-medium text-lg">
           {% if force_localpart %}

templates/pages/upstream_oauth2/link_mismatch.html

@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex items-center justify-center flex-1">
-    <div class="grid grid-cols-1 gap-6 w-96">
+    <div class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <h1 class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex flex-col font-medium text-lg text-center">
         This upstream account is already linked to another account.
       </h1>

templates/pages/upstream_oauth2/suggest_link.html

@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex items-center justify-center flex-1">
-    <div class="grid grid-cols-1 gap-6 w-96">
+    <div class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <h1 class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex flex-col font-medium text-lg text-center">
         Link to your existing account
       </h1>