From c91ce3622788f9aa3b8106b9143117edcea0cc22 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Wed, 15 Mar 2023 19:05:17 -0400
Subject: [PATCH] fix: mobile view for sibling switch

---
 client/src/components/Messages/Message.jsx    |  21 +++-
 .../src/components/Messages/SiblingSwitch.jsx |   4 +-
 client/src/mobile.css                         | 101 ++++++++++--------
 3 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 622b907454..f7e446463e 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -154,11 +154,13 @@ export default function Message({
             ) : (
               icon
             )}
-            <SiblingSwitch
-              siblingIdx={siblingIdx}
-              siblingCount={siblingCount}
-              setSiblingIdx={setSiblingIdx}
-            />
+            <div className="sibling-switch invisible absolute left-0 top-2 -ml-4 flex -translate-x-full items-center justify-center gap-1 text-xs group-hover:visible">
+              <SiblingSwitch
+                siblingIdx={siblingIdx}
+                siblingCount={siblingCount}
+                setSiblingIdx={setSiblingIdx}
+              />
+            </div>
           </div>
           <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
             <div className="flex flex-grow flex-col gap-3">
@@ -217,6 +219,15 @@ export default function Message({
               visible={!error && isCreatedByUser && !edit}
               onClick={() => enterEdit()}
             />
+            <div className="sibling-switch-container flex justify-between">
+              <div className="flex items-center justify-center gap-1 self-center pt-2 text-xs">
+                <SiblingSwitch
+                  siblingIdx={siblingIdx}
+                  siblingCount={siblingCount}
+                  setSiblingIdx={setSiblingIdx}
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/client/src/components/Messages/SiblingSwitch.jsx b/client/src/components/Messages/SiblingSwitch.jsx
index 2d746210b1..ebca64cdf0 100644
--- a/client/src/components/Messages/SiblingSwitch.jsx
+++ b/client/src/components/Messages/SiblingSwitch.jsx
@@ -13,7 +13,7 @@ export default function SiblingSwitch({
     setSiblingIdx(siblingIdx + 1);
   }
   return siblingCount > 1 ? (
-    <div className="sibling-switch text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible">
+    <>
       <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={previous} disabled={siblingIdx==0}>
         <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"></polyline></svg>
       </button>
@@ -21,6 +21,6 @@ export default function SiblingSwitch({
       <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={next} disabled={siblingIdx==siblingCount-1}>
         <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg>
       </button>
-    </div>
+      </>
   ):null;
 }
diff --git a/client/src/mobile.css b/client/src/mobile.css
index 321663129c..70977212db 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -1,70 +1,77 @@
 .nav-mask {
-    position: fixed;
-    z-index: 998;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(86, 88, 105, .75);
-    padding-left: 420px;
-    padding-top: 12px;
-    opacity: 0;
-    transition: all .5s;
-    pointer-events: none;
+  position: fixed;
+  z-index: 998;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(86, 88, 105, 0.75);
+  padding-left: 420px;
+  padding-top: 12px;
+  opacity: 0;
+  transition: all 0.5s;
+  pointer-events: none;
 }
 
 .nav {
-    transition: all .5s;
+  transition: all 0.5s;
 }
 
 .nav-close-button {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .sibling-switch-container {
     display: none;
+  }
 }
 
 @media (max-width: 1024px) {
-    .sibling-switch {
+  /* .sibling-switch {
         left: 114px;
         top: unset;
         bottom: 4px;
         visibility: visible;
         z-index: 2;
-    }
+    } */
+  .sibling-switch {
+    display: none;
+  }
 
-    .resubmit-edit-button {
-        display: block;
-        visibility: visible;
-    }
+  .resubmit-edit-button {
+    display: block;
+    visibility: visible;
+  }
 }
 
 @media (max-width: 767px) {
-    .nav-close-button {
-        display: block;
-        position: absolute;
-        left: 100%;
-        top: 12px;
-        margin-left: 20px;
-    }
+  .nav-close-button {
+    display: block;
+    position: absolute;
+    left: 100%;
+    top: 12px;
+    margin-left: 20px;
+  }
 
-    .nav {
-        position: fixed;
-        z-index: 999;
-        left: calc(-100%);;
-        top: 0;
-        bottom: 0;
-        max-width: 320px;
-        width: calc(100% - 60px);
-        opacity: 0;
-    }
-    
-    .nav.active {
-        left: 0;
-        opacity: 1;
-    }
+  .nav {
+    position: fixed;
+    z-index: 999;
+    left: calc(-100%);
+    top: 0;
+    bottom: 0;
+    max-width: 320px;
+    width: calc(100% - 60px);
+    opacity: 0;
+  }
 
-    .nav-mask.active {
-        opacity: 1;
-        pointer-events: auto;
-    }
+  .nav.active {
+    left: 0;
+    opacity: 1;
+  }
+
+  .nav-mask.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
-  
-  
\ No newline at end of file