Improve right card layout on small screens

andreas-bauer · Jul 18, 2024 · db2ec09 · db2ec09
1 parent 6d5bbaa
commit db2ec09
Showing 1 changed file with 22 additions and 17 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -204,30 +204,33 @@ export default function Home() {
 
         {/* Right side */}
         <div className='w-1/2 divide-y divide-gray-200 overflow-hidden rounded-md bg-white/70 shadow'>
-          <div className='flex flex-wrap items-center justify-between px-4 py-4'>
+          <div className='flex flex-wrap items-center justify-between gap-4 p-4'>
             {/* Card header */}
-            <PrimaryButton tabIndex={20} type='submit' form='contributor-form'>
+            <PrimaryButton
+              tabIndex={20}
+              type='submit'
+              className='order-1'
+              form='contributor-form'
+            >
               <PlayIcon className='-ml-0.5 h-5 w-5' />
               Generate Text
             </PrimaryButton>
 
-            <div>
-              <select
-                id='generator-style'
-                name='generator style'
-                tabIndex={21}
-                onChange={(e) => setSelectedStyle(e.target.value)}
-                className='block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6'
-              >
-                {Object.entries(availableStyles).map(([key, _]) => (
-                  <option key={key}>{key}</option>
-                ))}
-              </select>
-            </div>
+            <select
+              id='generator-style'
+              name='generator style'
+              tabIndex={21}
+              onChange={(e) => setSelectedStyle(e.target.value)}
+              className='order-3 w-full rounded-md border-0 py-1.5 text-gray-dark ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 lg:order-2 lg:w-44 lg:grow'
+            >
+              {Object.entries(availableStyles).map(([key, _]) => (
+                <option key={key}>{key}</option>
+              ))}
+            </select>
 
             <SecondaryButton
               type='submit'
-              className='w-24'
+              className='order-2 sm:w-24 lg:order-3'
               tabIndex={22}
               onClick={onCopyHandler}
             >
@@ -237,7 +240,9 @@ export default function Home() {
               <ClipboardIcon
                 className={`-ml-0.5 h-5 w-5 ${showSuccessCopy ? 'hidden' : ''}`}
               />
-              {showSuccessCopy ? 'Copied!' : 'Copy'}
+              <span className='hidden sm:flex'>
+                {showSuccessCopy ? 'Copied!' : 'Copy'}
+              </span>
             </SecondaryButton>
           </div>
           <div className='px-4 py-5'>