Improve android looks

bun.lock

@@ -9,6 +9,7 @@
         "@tailwindcss/vite": "4.1.18",
         "@tauri-apps/api": "2.10.1",
         "@tauri-apps/plugin-clipboard-manager": "2.3.2",
+        "@tauri-apps/plugin-os": "2.3.2",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "tailwindcss": "4.1.18",
@@ -270,6 +271,8 @@
 
     "@tauri-apps/plugin-clipboard-manager": ["@tauri-apps/plugin-clipboard-manager@2.3.2", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-CUlb5Hqi2oZbcZf4VUyUH53XWPPdtpw43EUpCza5HWZJwxEoDowFzNUDt1tRUXA8Uq+XPn17Ysfptip33sG4eQ=="],
 
+    "@tauri-apps/plugin-os": ["@tauri-apps/plugin-os@2.3.2", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-n+nXWeuSeF9wcEsSPmRnBEGrRgOy6jjkSU+UVCOV8YUGKb2erhDOxis7IqRXiRVHhY8XMKks00BJ0OAdkpf6+A=="],
+
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
 
     "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],

package.json

@@ -15,6 +15,7 @@
     "@tailwindcss/vite": "4.1.18",
     "@tauri-apps/api": "2.10.1",
     "@tauri-apps/plugin-clipboard-manager": "2.3.2",
+    "@tauri-apps/plugin-os": "2.3.2",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"

src-tauri/Cargo.toml

@@ -17,3 +17,4 @@ tauri = { version = "2.10.2", features = [] }
 serde = { version = "1.0.228", features = ["derive"] }
 serde_json = "1.0.149"
 tauri-plugin-clipboard-manager = "2.3.2"
+tauri-plugin-os = "2.3.2"

src-tauri/capabilities/default.json

@@ -8,6 +8,7 @@
   "permissions": [
     "core:default",
     "clipboard-manager:default",
-    "clipboard-manager:allow-write-text"
+    "clipboard-manager:allow-write-text",
+    "os:default"
   ]
 }

src-tauri/src/lib.rs

@@ -1,6 +1,7 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_clipboard_manager::init())
         .invoke_handler(tauri::generate_handler![])
         .run(tauri::generate_context!())

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>
+    </>
   )
 }