From 8d3459d126ced081813a60c9df2b6d4f107b68ae Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@boxyhq.com>
Date: Wed, 27 Jul 2022 13:22:38 +0530
Subject: [PATCH] Fix the mobile responsive issues (#25)

---
 components/Header.tsx |   8 ++--
 components/Layout.tsx |   2 +-
 pages/index.tsx       | 108 +++++++++++++++++++++---------------------
 pages/saml/login.tsx  |   2 +-
 4 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 70210de..d04a250 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -2,8 +2,8 @@ import Link from 'next/link';
 
 export default function Header() {
   return (
-    <header className='body-font border-b text-gray-600'>
-      <div className='container mx-auto flex flex-col flex-wrap items-center justify-between space-y-3 py-3 md:flex-row'>
+    <header className='body-font border-b px-2 text-gray-600'>
+      <div className='container mx-auto flex flex-col flex-wrap items-center justify-between space-y-2 py-3 md:flex-row'>
         <Link href='/'>
           <a className='title-font flex items-center font-medium text-gray-900 md:mb-0'>
             <svg
@@ -20,8 +20,8 @@ export default function Header() {
             <span className='ml-3 text-2xl'>Mock SAML</span>
           </a>
         </Link>
-        <div className='flex flex-col items-center md:flex-row'>
-          <span className='mr-5'>
+        <div className='flex flex-col items-center space-y-2 md:flex-row md:space-y-0 md:space-x-2'>
+          <span>
             <a
               className='btn btn-outline btn-sm'
               href='https://github.com/boxyhq/jackson'
diff --git a/components/Layout.tsx b/components/Layout.tsx
index bc0ccb0..5d1f62e 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -35,7 +35,7 @@ export default function Layout({ children }: LayoutProps) {
         <meta name='twitter:image' content={ogImage} />
       </Head>
       <Header />
-      <main className='h-[calc(100%_-_80px)] overflow-auto'>{children}</main>
+      <main className='h-[calc(100%_-_80px)] overflow-auto py-5'>{children}</main>
     </>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 7e1cd14..90bac1a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,65 +8,63 @@ const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
   const { ssoUrl, entityId, certificate } = metadata;
 
   return (
-    <div className='flex min-h-full items-center justify-center'>
-      <div className='flex w-full max-w-4xl flex-col px-3'>
-        <h1 className='mb-20 text-center text-2xl font-extrabold text-gray-900'>
+    <div className='flex items-center justify-center md:py-10'>
+      <div className='flex w-full max-w-4xl flex-col space-y-5 px-2'>
+        <h1 className='text-center text-xl font-extrabold text-gray-900 md:text-2xl'>
           A free SAML 2.0 Identity Provider for testing SAML SSO integrations.
         </h1>
-        <div className='space-y-4'>
-          <div className='flex justify-between'>
-            <Link href='/api/saml/metadata/download'>
-              <a className='btn btn-active btn-primary'>
-                <svg
-                  className='mr-1 inline-block h-6 w-6'
-                  fill='none'
-                  viewBox='0 0 24 24'
-                  stroke='currentColor'
-                  aria-hidden
-                  strokeWidth='2'>
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
-                  />
-                </svg>
-                Download Metadata
-              </a>
-            </Link>
-            <Link href='/saml/login'>
-              <a className='btn btn-outline btn-primary'>Test IdP Login</a>
-            </Link>
-          </div>
-          <div className='border-2 p-3'>
-            <h2 className='mb-5 text-center text-2xl font-bold text-gray-900'>Mock SAML Metadata</h2>
-            <div className='grid grid-cols-2 gap-y-5 gap-x-5'>
-              <div className='form-control'>
-                <label className='label'>
-                  <span className='label-text font-bold'>SSO URL</span>
-                </label>
-                <input type='text' defaultValue={ssoUrl} className='input input-bordered' disabled />
-              </div>
-              <div className='form-control'>
-                <label className='label'>
-                  <span className='label-text font-bold'>Entity ID</span>
-                </label>
-                <input type='text' defaultValue={entityId} className='input input-bordered' disabled />
-              </div>
-              <div className='form-control col-span-2 w-full'>
-                <label className='label'>
-                  <span className='label-text font-bold'>Certificate</span>
-                </label>
-                <textarea
-                  className='textarea textarea-bordered h-48'
-                  defaultValue={certificate}
-                  disabled></textarea>
-              </div>
+        <div className='flex flex-col justify-between md:flex-row'>
+          <Link href='/api/saml/metadata/download'>
+            <a className='btn btn-active btn-primary'>
+              <svg
+                className='mr-1 inline-block h-6 w-6'
+                fill='none'
+                viewBox='0 0 24 24'
+                stroke='currentColor'
+                aria-hidden
+                strokeWidth='2'>
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
+                />
+              </svg>
+              Download Metadata
+            </a>
+          </Link>
+          <Link href='/saml/login'>
+            <a className='btn btn-outline btn-primary'>Test IdP Login</a>
+          </Link>
+        </div>
+        <div className='border-2 p-3'>
+          <h2 className='mb-5 text-center text-2xl font-bold text-gray-900'>Mock SAML Metadata</h2>
+          <div className='grid grid-cols-2 gap-y-5 gap-x-5'>
+            <div className='form-control'>
+              <label className='label'>
+                <span className='label-text font-bold'>SSO URL</span>
+              </label>
+              <input type='text' defaultValue={ssoUrl} className='input input-bordered' disabled />
+            </div>
+            <div className='form-control'>
+              <label className='label'>
+                <span className='label-text font-bold'>Entity ID</span>
+              </label>
+              <input type='text' defaultValue={entityId} className='input input-bordered' disabled />
+            </div>
+            <div className='form-control col-span-2 w-full'>
+              <label className='label'>
+                <span className='label-text font-bold'>Certificate</span>
+              </label>
+              <textarea
+                className='textarea textarea-bordered h-48'
+                defaultValue={certificate}
+                disabled></textarea>
             </div>
           </div>
-          <div className='alert alert-error'>
-            <div>
-              <span className='text-white'>Caution: Not for production use.</span>
-            </div>
+        </div>
+        <div className='alert alert-error'>
+          <div>
+            <span className='text-white'>Caution: Not for production use.</span>
           </div>
         </div>
       </div>
diff --git a/pages/saml/login.tsx b/pages/saml/login.tsx
index 4ef3e57..a9d2002 100644
--- a/pages/saml/login.tsx
+++ b/pages/saml/login.tsx
@@ -74,7 +74,7 @@ export default function Login() {
       <div className='flex min-h-full items-center justify-center'>
         <div className='flex w-full max-w-xl flex-col px-3'>
           <div className='space-y-2'>
-            <div className='border-2 p-5'>
+            <div className='border-2 p-4'>
               <h2 className='mb-5 text-center text-2xl font-bold text-gray-900'>SAML SSO Login</h2>
               <form onSubmit={handleSubmit}>
                 <div className='grid grid-cols-2 gap-y-1 gap-x-5'>