💅 style fixes

Author: flov

pages/trips/index.tsx

@@ -192,11 +192,15 @@ const Index: FC<{
         )}
       />
 
-      <div className={`relative ${isShowingMap ? 'visible' : 'invisible'}`}>
+      <div
+        className={`relative md:visible ${
+          isShowingMap ? 'visible' : 'invisible'
+        }`}
+      >
         {!!bounds && (
           <Button
             color="light"
-            className="absolute z-10 flex items-center justify-center p-2 text-gray-800 bg-white rounded-full cursor-pointer animate-fadeIn top-5 gap-2 left-1/2"
+            className="absolute z-10 flex items-center justify-center p-2 text-gray-800 bg-white rounded-full cursor-pointer translate--50p animate-fadeIn top-5 gap-2 left-1/2"
             onClick={() => searchMapWithinBounds()}
             size="sm"
           >

src/components/OverlayBubble.tsx

@@ -54,7 +54,7 @@ const OverlayBubble: FC<{ trip: Trip; map: google.maps.Map }> = ({
   return (
     <>
       {isOpened ? (
-        <div className="relative max-w-lg p-3 text-lg text-gray-900 bg-white rounded-lg -top-16 -left-12">
+        <div className="relative max-w-lg p-3 text-black bg-white rounded-lg w-78">
           <button
             className="absolute top-0 right-0"
             onClick={handleBubbleClick}

styles/globals.css

@@ -92,6 +92,10 @@ nav a { text-decoration: none; }
 
 }
 
+.translate--50 {
+  transform: translate(-50%, 0);
+}
+
 
 .dark input {
   color: #000;