From dc7bbc3545067637c4418ec6d2b3c265c4e59546 Mon Sep 17 00:00:00 2001
From: Junghyun Nam <13118114+cr0sh@users.noreply.github.com>
Date: Sun, 16 Jul 2023 23:46:26 +0900
Subject: [PATCH] feat: implement responsive style for mobile  (#5)

* feat: implement responsive style for mobile

* build: bump version
---
 Cargo.lock | 2 +-
 Cargo.toml | 2 +-
 src/app.rs | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index fe28506..b86d8b8 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -689,7 +689,7 @@ dependencies = [
 
 [[package]]
 name = "syn-debugger-web"
-version = "0.1.2"
+version = "0.2.0"
 dependencies = [
  "gloo-timers",
  "proc-macro2",
diff --git a/Cargo.toml b/Cargo.toml
index 7b96752..b65eb06 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "syn-debugger-web"
-version = "0.1.2"
+version = "0.2.0"
 edition = "2021"
 description = "A syntax debugger for procedural macro developers, powered by Syn and Yew."
 readme = "README.md"
diff --git a/src/app.rs b/src/app.rs
index c752d26..ac6723d 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -69,12 +69,12 @@ pub fn app() -> Html {
     html! {
         <main>
             <div class={ classes!("flex", "flex-col", "items-stretch", "px-20", "py-10", "h-screen") }>
-                <h1 class={ classes!("py-5", "text-xl") }>{ format!("syn-debugger-web v{}", env!("CARGO_PKG_VERSION")) }</h1>
-                <div class={ classes!("flex", "flex-row", "grow", "h-4/5") }>
-                    <div class={ classes!("flex", "flex-col", "px-5", "text-md", "w-1/2") }>
+                <h1 class={ classes!("py-5", "text-2xl") }>{ format!("syn-debugger-web v{}", env!("CARGO_PKG_VERSION")) }</h1>
+                <div class={ classes!("flex", "text-xl", "lg:text-md", "flex-col", "lg:flex-row", "grow", "w-full", "h-4/5") }>
+                    <div class={ classes!("flex", "flex-col", "px-5", "text-md", "w-full", "lg:w-1/2", "h-1/2", "lg:h-full") }>
                         <Input {input_ref} onchange={onchange.clone()}/>
                     </div>
-                    <div class={ classes!("flex", "flex-col", "px-5", "text-md", "w-1/2") }>
+                    <div class={ classes!("flex", "flex-col", "px-5", "text-md", "w-full", "lg:w-1/2", "h-1/2", "lg:h-full") }>
                         <Output output={input_value} {parse_method} {onchange}/>
                     </div>
                 </div>