[Feat] optimized for mobile

mistricky · mistricky · commit 17d43614e57e · 2025-12-21T16:36:09.000+08:00
diff --git a/app/index.html b/app/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>zzhack</title>
     <link data-trunk rel="tailwind-css" href="src/styles/global.css"/>
     <link data-trunk rel="copy-dir" href="../data" />
diff --git a/app/src/components/header_bar.rs b/app/src/components/header_bar.rs
@@ -6,7 +6,7 @@ pub struct HeaderBarProps {}
 #[function_component(HeaderBar)]
 pub fn header_bar(_props: &HeaderBarProps) -> Html {
     html! {
-        <div class="flex items-center justify-between px-4 py-3 bg-card backdrop-blur-xl">
+        <div class="flex items-center justify-between px-4 py-2 sm:py-3 bg-card backdrop-blur-xl">
             <div class="flex items-center gap-3">
                 <div class="flex items-center gap-2">
                     <span class="inline-block h-3 w-3 rounded-full bg-rose-500 shadow-inner shadow-rose-500/30" />
diff --git a/app/src/components/output_log.rs b/app/src/components/output_log.rs
@@ -10,7 +10,7 @@ pub struct OutputLogProps {
 #[function_component(OutputLog)]
 pub fn output_log(props: &OutputLogProps) -> Html {
     html! {
-        <div class="space-y-1 font-mono text-sm text-slate-100">
+        <div class="space-y-1 font-mono text-base sm:text-sm text-slate-100">
             { for props.lines.iter().enumerate().map(|(idx, line)| render_line(idx, line)) }
         </div>
     }
diff --git a/app/src/components/prompt_line.rs b/app/src/components/prompt_line.rs
@@ -52,10 +52,10 @@ pub fn prompt_line(props: &PromptLineProps) -> Html {
     };
 
     html! {
-        <form onsubmit={on_submit} class="flex items-center mt-3 gap-3 font-mono text-sm text-slate-100">
+        <form onsubmit={on_submit} class="flex items-center mt-4 sm:mt-3 gap-2 sm:gap-3 font-mono text-base sm:text-sm text-slate-100">
             <span class="text-emerald-400">{ ConfigService::get().app.prompt_symbol.clone() }</span>
             <input
-                class="flex-1 bg-transparent text-slate-100 outline-none placeholder:text-slate-600"
+                class="flex-1 bg-transparent text-slate-100 outline-none placeholder:text-slate-600 text-base sm:text-sm"
                 type="text"
                 value={props.value.clone()}
                 oninput={on_input}
diff --git a/app/src/components/terminal_window.rs b/app/src/components/terminal_window.rs
@@ -60,10 +60,10 @@ pub fn terminal_window(props: &TerminalWindowProps) -> Html {
     };
 
     html! {
-            <div class="min-h-screen overflow-hidden bg-page text-text flex items-center justify-center p-6">
+        <div class="min-h-[100svh] bg-page text-text flex items-start sm:items-center justify-center px-4 pt-16 pb-6 sm:p-6 overflow-y-auto">
             <button
                 type="button"
-                class="fixed top-6 right-6 h-10 w-10 flex items-center justify-center rounded-full text-border hover:bg-hover transition-colors"
+                class="fixed top-4 right-4 sm:top-6 sm:right-6 h-9 w-9 sm:h-10 sm:w-10 flex items-center justify-center rounded-full text-border hover:bg-hover transition-colors"
                 aria-label="Toggle theme"
                 onclick={toggle_icon}
             >
@@ -73,15 +73,15 @@ pub fn terminal_window(props: &TerminalWindowProps) -> Html {
             {
                 if !props.show_window {
                     html! {
-                        <div class="w-full max-w-prose">
+                        <div class="w-full sm:max-w-prose">
                             {body}
                         </div>
                     }
                 } else {
                     html! {
-                        <div class="w-full max-w-prose min-h-[400px] overflow-hidden rounded-2xl border border-[0.5px] border-border bg-card shadow-[0_20px_60px_-25px_rgba(0,0,0,0.85)] backdrop-blur-xl ring-[0.5px] ring-border">
+                        <div class="w-full sm:max-w-prose min-h-[70vh] sm:min-h-[400px] overflow-hidden rounded-none sm:rounded-2xl border-0 sm:border sm:border-[0.5px] border-border bg-card shadow-none sm:shadow-[0_20px_60px_-25px_rgba(0,0,0,0.85)] backdrop-blur-xl ring-0 sm:ring-[0.5px] ring-border">
                             <HeaderBar />
-                            <div class="bg-card backdrop-blur-xl px-5 py-4 font-mono text-sm text-text space-y-3">
+                            <div class="bg-card backdrop-blur-xl px-4 sm:px-5 py-4 font-mono text-base sm:text-sm text-text space-y-3">
                                 {body}
                             </div>
                         </div>

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ pub struct OutputLogProps {`
`10`	`10`	`#[function_component(OutputLog)]`
`11`	`11`	`pub fn output_log(props: &OutputLogProps) -> Html {`
`12`	`12`	`html! {`
`13`		`- <div class="space-y-1 font-mono text-sm text-slate-100">`
	`13`	`+ <div class="space-y-1 font-mono text-base sm:text-sm text-slate-100">`
`14`	`14`	`{ for props.lines.iter().enumerate().map(\|(idx, line)\| render_line(idx, line)) }`
`15`	`15`	`</div>`
`16`	`16`	`}`