Improve android looks

src/App.css

@@ -5,7 +5,7 @@
 }
 
 body {
-  @apply bg-(--col0) text-white flex justify-center items-center h-screen text-center select-none;
+  @apply bg-(--col0) text-white h-screen text-center select-none relative;
   font-family: "Lexend", sans-serif;
 
   --col0: rgb(8, 8, 8);
@@ -21,7 +21,7 @@ body {
 }
 
 .container {
-  @apply max-w-none max-h-none w-[calc(100vw-32px)] h-[calc(100vh-32px)] bg-(--col1) border border-(--col3) p-4 rounded-lg overflow-auto;
+  @apply max-w-none max-h-none bg-(--col1) border border-(--col3) p-4 overflow-auto;
 }
 
 h1 {

src/App.tsx

@@ -2,11 +2,13 @@ import { useState, useEffect, useCallback } from 'react'
 import '@fontsource/lexend'
 import './App.css'
 import { writeText } from '@tauri-apps/plugin-clipboard-manager'
+import { platform } from '@tauri-apps/plugin-os'
 
 function App () {
   const [password, setPassword] = useState('')
   const [length, setLength] = useState(8)
   const [copied, setCopied] = useState(false)
+  const [isAndroid, setIsAndroid] = useState(false)
 
   const [useUpper, setUseUpper] = useState<boolean>(true)
   const [useLower, setUseLower] = useState<boolean>(true)
@@ -42,96 +44,111 @@ function App () {
     setTimeout(() => setCopied(false), 1000)
   }
 
+  useEffect(() => {
+    setTimeout(() => setIsAndroid(platform() === 'android'), 0)
+  }, [])
+
   useEffect(() => {
     setTimeout(() => generatePassword(), 0)
   }, [generatePassword])
 
   return (
-    <main className='container'>
-      <h1>Password Generator</h1>
-      <p>Select a length, or use the slider for a custom value.</p>
-
-      <form
-        className='form'
-        onSubmit={e => {
-          e.preventDefault()
-          generatePassword()
-        }}
+    <>
+      {isAndroid && (
+        <div className='absolute left-0 top-0 w-full h-10 bg-(--col1) border-b border-b-(--col3)' />
+      )}
+      <div
+        className={`container w-[calc(100vw-32px)] absolute left-4 ${
+          isAndroid
+            ? 'h-[calc(100vh-80px)] top-16 rounded-2xl'
+            : 'h-[calc(100vh-32px)] top-4 rounded-lg'
+        }`}
       >
-        <div className='slider-section'>
-          <label htmlFor='password-length'>Password Length: {length}</label>
-          <input
-            id='password-length'
-            type='range'
-            min='1'
-            max='500'
-            value={length}
-            onChange={e => setLength(Number(e.target.value))}
-            step='1'
-          />
-        </div>
+        <h1>Password Generator</h1>
+        <p>Select a length, or use the slider for a custom value.</p>
 
-        <div className='preset-buttons'>
-          {presets.map(preset => (
-            <button
-              key={preset}
-              type='button'
-              className='preset-btn'
-              onClick={() => setLength(preset)}
-            >
-              {preset}
-            </button>
-          ))}
-        </div>
-      </form>
-      <p>Characters to use</p>
-      <div className='char-selection-buttons'>
-        <button
-          type='button'
-          className={useUpper ? 'char-selected' : ''}
-          onClick={() => setUseUpper(!useUpper)}
+        <form
+          className='form'
+          onSubmit={e => {
+            e.preventDefault()
+            generatePassword()
+          }}
         >
-          Use uppercase
-        </button>
-        <button
-          type='button'
-          className={useLower ? 'char-selected' : ''}
-          onClick={() => setUseLower(!useLower)}
-        >
-          Use lowercases
-        </button>
-        <button
-          type='button'
-          className={useNumbers ? 'char-selected' : ''}
-          onClick={() => setUseNumbers(!useNumbers)}
-        >
-          Use numbers
-        </button>
-        <button
-          type='button'
-          className={useSymbols ? 'char-selected' : ''}
-          onClick={() => setUseSymbols(!useSymbols)}
-        >
-          Use symbols
-        </button>
-      </div>
+          <div className='slider-section'>
+            <label htmlFor='password-length'>Password Length: {length}</label>
+            <input
+              id='password-length'
+              type='range'
+              min='1'
+              max='500'
+              value={length}
+              onChange={e => setLength(Number(e.target.value))}
+              step='1'
+            />
+          </div>
 
-      <div className='result-section'>
-        <p className='password-display'>{password}</p>
-        <div className='result-buttons'>
+          <div className='preset-buttons'>
+            {presets.map(preset => (
+              <button
+                key={preset}
+                type='button'
+                className='preset-btn'
+                onClick={() => setLength(preset)}
+              >
+                {preset}
+              </button>
+            ))}
+          </div>
+        </form>
+        <p>Characters to use</p>
+        <div className='char-selection-buttons'>
           <button
-            className='copy-btn'
-            onClick={copyToClipboard}
-            disabled={copied}
+            type='button'
+            className={useUpper ? 'char-selected' : ''}
+            onClick={() => setUseUpper(!useUpper)}
           >
-            {copied ? 'Copied' : 'Copy'}
+            Use uppercase
           </button>
-          <button className='copy-btn' onClick={generatePassword}>
-            Regenerate
+          <button
+            type='button'
+            className={useLower ? 'char-selected' : ''}
+            onClick={() => setUseLower(!useLower)}
+          >
+            Use lowercases
+          </button>
+          <button
+            type='button'
+            className={useNumbers ? 'char-selected' : ''}
+            onClick={() => setUseNumbers(!useNumbers)}
+          >
+            Use numbers
+          </button>
+          <button
+            type='button'
+            className={useSymbols ? 'char-selected' : ''}
+            onClick={() => setUseSymbols(!useSymbols)}
+          >
+            Use symbols
           </button>
         </div>
+
+        <div className='result-section'>
+          <p className='password-display'>{password}</p>
+          <div className='result-buttons'>
+            <button
+              className='copy-btn'
+              onClick={copyToClipboard}
+              disabled={copied}
+            >
+              {copied ? 'Copied' : 'Copy'}
+            </button>
+            <button className='copy-btn' onClick={generatePassword}>
+              Regenerate
+            </button>
+          </div>
+        </div>
       </div>
-    </main>
+    </>
   )
 }