fix: Improve mobile layout for right panel

debjitbis08 · Nov 25, 2024 · b058c61 · b058c61
1 parent 59c7959
commit b058c61
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/components/Assembled.jsx b/src/components/Assembled.jsx
@@ -114,10 +114,6 @@ export function Assembled() {
                     <Tooltip placement="left">
                         <Tooltip.Trigger class="tooltip__trigger relative py-1 hidden md:block" onClick={toggleExpanded}>
                             {expanded() ? <BiSolidDockRight /> : <BiRegularDockRight />}
-                            {store.assembled.length || store.errors.length && !expanded() ? (
-                                <span
-                                    class={`w-2 h-2 rounded-[2rem] bg-terminal absolute left-0 bottom-[-4px] ${styles.radiatingBorder}`}> </span>
-                            ) : null}
                         </Tooltip.Trigger>
                         <Tooltip.Portal>
                             <Tooltip.Content class="tooltip__content">

diff --git a/src/components/RightPanel.jsx b/src/components/RightPanel.jsx
@@ -78,7 +78,11 @@ export function RightPanel() {
         <div class={`flex items-start ${expanded() ? "" : ""}`}
              style={{width: `${expanded() ? `${width()}px` : 'auto'}`}}>
             <div
-                class="relative z-10 bg-page-background flex flex-col items-center h-sm:gap-4 gap-4 pt-2 md:pt-4 border-r-0 md:border-r border-r-main-border h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)]">
+                class="
+                    md:relative z-10 bg-page-background flex md:flex-col items-center h-sm:gap-4 gap-4 pt-2 md:pt-4 border-r-0 md:border-r border-r-main-border md:h-[calc(100vh-6.2rem)]
+                    fixed bottom-[5.5rem] left-0 h-auto flex-row w-full text-xl pl-2 content-evenly justify-evenly
+                    md:bottom-0 md:left-0 md:pl-0 md:w-auto
+                ">
                 <div class="hidden md:block">
                     <PanelButton
                         icon={expanded() ? <BiSolidDockLeft /> : <BiRegularDockLeft />}
@@ -125,7 +129,7 @@ export function RightPanel() {
                 <div class="pb-1"></div>
             </div>
             <div id="content"
-                 class="shadow-xl md:shadow-none text-sm md:text-base relative z-5 min-w-60 w-full bg-secondary-background border-l-0 border-t border-b border-r md:border-r-0 border-main-border rounded-tl-sm rounded-bl-sm py-4  h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)] flex overflow-x-hidden overflow-y-auto transform transition-transform duration-300 ease-in-out"
+                 class="shadow-xl md:shadow-none text-sm md:text-base relative z-5 min-w-60 w-full bg-secondary-background border-l-0 border-t border-b border-r md:border-r-0 border-main-border rounded-tl-sm rounded-bl-sm py-4  h-[calc(100svh-10rem)] md:h-[calc(100vh-6.2rem)] flex overflow-x-hidden overflow-y-auto transform transition-transform duration-300 ease-in-out"
                  style={{
                      display: expanded() ? "block" : "none",
                  }}>
@@ -149,7 +153,7 @@ export function RightPanel() {
                 <div class="grow"></div>
             </div>
             <div
-                class="w-0 md:w-[5px] h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)] cursor-col-resize bg-secondary-background hover:bg-terminal active:bg-terminal border-y border-y-main-border"
+                class="w-0 md:min-w-[3px] md:w-[3px] h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)] cursor-col-resize bg-secondary-background hover:bg-terminal active:bg-terminal border-y border-y-main-border"
                 onMouseDown={startResize}
                 style={{
                     display: expanded() ? "flex" : "none",