Adjust the top spacing and the bottom spacing of the layout

authgear · Jul 9, 2024 · 8065416 · 8065416
2 parents dfe5974 + dcfdaae
commit 8065416
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 10 deletions.
diff --git a/authui/src/authflowv2/components/layout.css b/authui/src/authflowv2/components/layout.css
@@ -49,8 +49,7 @@
     .layout__header--default,
     .layout__footer--default {
       @apply flex-1;
-      min-height: 24px;
-      max-height: 160px;
+      @apply min-h-5 max-h-40;
     }
   }
 

diff --git a/authui/tailwind.config.js b/authui/tailwind.config.js
@@ -23,11 +23,18 @@ module.exports = {
       flex: {
         "1-0-auto": "1 0 auto",
       },
-      spacing: {
-        18: "4.5rem",
-      },
-      maxWidth: {
-        90: "90rem",
+      height: (theme) => theme("spacing"),
+      width: (theme) => theme("spacing"),
+      minHeight: (theme) => theme("spacing"),
+      maxHeight: (theme) => theme("spacing"),
+      minWidth: (theme) => theme("spacing"),
+      maxWidth: (theme) => theme("spacing"),
+      spacing: () => {
+        const spacing = {};
+        for (let i = 0; i <= 360; i += 0.5) {
+          spacing[i] = `${i * 0.25}rem`;
+        }
+        return spacing;
       },
     },
     screens: {

diff --git a/resources/authgear/templates/en/web/__page_frame.html b/resources/authgear/templates/en/web/__page_frame.html
@@ -32,7 +32,7 @@
 {{ template "__message_bar.html" . }}
 <div id="loading-progress-bar"></div>
 {{ template "__tutorial.html" . }}
-<div class="max-w-90 m-auto">
+<div class="max-w-360 m-auto">
 	<div class="grid grid-cols-6 tablet:grid-cols-12 desktop:grid-cols-12 gap-x-4 auto-rows-auto mx-4 tablet:mx-4 desktop:mx-6 mb-8">
 		<div class="col-start-1 col-span-6 tablet:col-start-4 tablet:col-span-6 desktop:col-start-5 desktop:col-span-4">
 			<div class="page-header">

diff --git a/resources/authgear/templates/en/web/__wide_page_frame.html b/resources/authgear/templates/en/web/__wide_page_frame.html
@@ -15,7 +15,7 @@
 {{ template "__message_bar.html" . }}
 <div id="loading-progress-bar"></div>
 {{ template "__tutorial.html" . }}
-<div class="max-w-90 m-auto">
+<div class="max-w-360 m-auto">
 	<div class="grid grid-cols-6 tablet:grid-cols-12 desktop:grid-cols-12 gap-x-4 auto-rows-auto mx-4 tablet:mx-4 desktop:mx-6 mb-8">
 		<div class="col-start-1 col-span-6 tablet:col-start-3 tablet:col-span-8 desktop:col-start-4 desktop:col-span-6">
 			{{ template "__header.html" . }}

diff --git a/resources/authgear/templates/en/web/app_not_found.html b/resources/authgear/templates/en/web/app_not_found.html
@@ -37,7 +37,7 @@
 {{ template "__message_bar.html" . }}
 <div id="loading-progress-bar"></div>
 {{ template "__tutorial.html" . }}
-<div class="max-w-90 m-auto">
+<div class="max-w-360 m-auto">
 <div class="grid grid-cols-6 tablet:grid-cols-12 desktop:grid-cols-12 gap-x-4 auto-rows-auto mx-4 tablet:mx-4 desktop:mx-6 mb-8">
 <div class="col-start-1 col-span-6 tablet:col-start-4 tablet:col-span-6 desktop:col-start-5 desktop:col-span-4">
 <div class="page-header">