fix: add some design fix

Author: dancixx

src/app.rs

@@ -31,8 +31,8 @@ pub fn App() -> impl IntoView {
   view! {
       <div class="flex h-screen">
           <Sidebar/>
-          <div>
-              <main>
+          <div class="flex flex-col flex-1 overflow-hidden">
+              <main class="flex-1 overflow-y-scroll">
                   <Tabs value=tabs.selected_tab>
                       <For
                           each=move || (0..tabs.active_tabs.get())
@@ -66,8 +66,8 @@ pub fn App() -> impl IntoView {
                       "+"
                   </Button>
               </main>
+              <Footer/>
           </div>
-          <Footer/>
       </div>
   }
 }

src/footer.rs

@@ -23,24 +23,16 @@ pub fn Footer() -> impl IntoView {
           <div class="flex flex-row gap-1 items-center text-xs">
               <p>{formatted_timer}</p>
               <button
-                  class=if table_view() == QueryTableLayout::Records {
-                      "p-1 hover:bg-gray-300 rounded-full bg-gray-300"
-                  } else {
-                      "p-1 hover:bg-gray-300 rounded-full"
-                  }
-
+                  class="p-1 hover:bg-gray-300 rounded-full"
+                  class=("bg-gray-300", move || table_view() == QueryTableLayout::Records)
                   on:click=move |_| table_view.set(QueryTableLayout::Records)
               >
 
                   <Icon icon=icondata::HiBars4OutlineLg width="16" height="16"/>
               </button>
               <button
-                  class=if table_view() == QueryTableLayout::Grid {
-                      "p-1 hover:bg-gray-300 rounded-full bg-gray-300"
-                  } else {
-                      "p-1 hover:bg-gray-300 rounded-full"
-                  }
-
+                  class="p-1 hover:bg-gray-300 rounded-full"
+                  class=("bg-gray-300", move || table_view() == QueryTableLayout::Grid)
                   on:click=move |_| table_view.set(QueryTableLayout::Grid)
               >
                   <Icon icon=icondata::HiTableCellsOutlineLg width="16" height="16"/>

src/sidebar/index.rs

@@ -39,14 +39,14 @@ pub fn Sidebar() -> impl IntoView {
   view! {
       <div
           _ref=node_ref
-          classes="flex border-r-1 min-w-[320px] justify-between border-neutral-200 flex-col p-4"
+          class="flex border-r-1 min-w-[320px] justify-between border-neutral-200 flex-col p-4"
       >
           <Connection show=show/>
-          <div classes="flex flex-col overflow-auto">
-              <div classes="flex flex-row justify-between items-center">
-                  <p classes="font-semibold text-lg">Projects</p>
+          <div class="flex flex-col overflow-auto">
+              <div class="flex flex-row justify-between items-center">
+                  <p class="font-semibold text-lg">Projects</p>
                   <button
-                      classes="px-2 rounded-full hover:bg-gray-200"
+                      class="px-2 rounded-full hover:bg-gray-200"
                       on:click=move |_| show.set(true)
                   >
                       "+"
@@ -58,9 +58,9 @@ pub fn Sidebar() -> impl IntoView {
                   children=|(project, _)| view! { <Project project=project/> }
               />
           </div>
-          <div classes="py-2">
-              <p classes="font-semibold text-lg">Saved Queries</p>
-              <div classes="text-sm">
+          <div class="py-2">
+              <p class="font-semibold text-lg">Saved Queries</p>
+              <div class="text-sm">
                   <Queries/>
               </div>
           </div>