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,12 +44,26 @@ function App () {
     setTimeout(() => setCopied(false), 1000)
   }
 
+  useEffect(() => {
+    setTimeout(() => setIsAndroid(platform() === 'android'), 0)
+  }, [])
+
   useEffect(() => {
     setTimeout(() => generatePassword(), 0)
   }, [generatePassword])
 
   return (
-    <main className='container'>
+    <>
+      {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'
+        }`}
+      >
         <h1>Password Generator</h1>
         <p>Select a length, or use the slider for a custom value.</p>
 
@@ -131,7 +147,8 @@ function App () {
             </button>
           </div>
         </div>
-    </main>
+      </div>
+    </>
   )
 }