style fixes

src/components/AddPlaceMap.tsx

@@ -2,9 +2,13 @@ import { FC, useEffect, useRef, useState } from "react";
 import ReactMapGL, { Marker, ViewState } from "react-map-gl";
 import { IoLocationSharp } from "react-icons/io5";
 import Map from "./ui/Map";
-import { LOCAL_STORAGE_VIEWPORT, ViewportFullHeight, ViewportHalfHeight } from "src/consts";
+import {
+  LOCAL_STORAGE_VIEWPORT,
+  ViewportFullHeight,
+  ViewportHalfHeight,
+} from "src/consts";
 import { useLocalStorage } from "src/hooks";
-import { minWidthXl } from 'src/utils';
+import { minWidthXl } from "src/utils";
 
 interface IProps {
   searchedViewport: ViewState;
@@ -18,6 +22,7 @@ const AddPlaceMap: FC<IProps> = ({ searchedViewport }) => {
     zoom: 13,
   });
   const [viewport, setViewport] = useState<ViewState>(localViewport);
+  const isMinWidthXl = minWidthXl();
 
   useEffect(() => {
     setViewport({ ...searchedViewport, zoom: 13 });
@@ -28,7 +33,7 @@ const AddPlaceMap: FC<IProps> = ({ searchedViewport }) => {
       <Map
         viewport={viewport}
         width="100%"
-        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
+        height={isMinWidthXl ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={18}
         ref={mapRef}

src/components/HomeMap.tsx

@@ -42,6 +42,7 @@ const HomeMap: FC<IProps> = ({
       zoom: 11,
     }
   );
+  const isMinWidthXl = minWidthXl();
 
   useEffect(() => {
     if (searchedViewport) {
@@ -63,7 +64,7 @@ const HomeMap: FC<IProps> = ({
       <Map
         viewport={viewport}
         width="100%"
-        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
+        height={isMinWidthXl ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={15}
         ref={(instance) => {

src/components/Navbar.tsx

@@ -56,6 +56,7 @@ const MenuItem: FC<IMenuItem> = ({
 const Navbar = () => {
   const { user, logout, authenticated } = useAuth();
   const router = useRouter();
+  const isMinWidthMd = minWidthMd();
 
   const closeAuthModal = () => {
     router.push(urls.home);
@@ -76,7 +77,7 @@ const Navbar = () => {
         <div className="flex justify-between items-center">
           {authenticated && router.pathname === urls.home && (
             <Button asLink href={urls.addPlace}>
-              {minWidthMd() ? "Add a new place" : <IoMdAdd />}
+              {isMinWidthMd ? "Add a new place" : <IoMdAdd />}
             </Button>
           )}
 

src/components/ViewPlaceMap.tsx

@@ -4,7 +4,7 @@ import { IoLocationSharp } from "react-icons/io5";
 import Link from "next/link";
 import Map from "./ui/Map";
 import { urls, ViewportFullHeight, ViewportHalfHeight } from "src/consts";
-import { minWidthXl } from 'src/utils';
+import { minWidthXl } from "src/utils";
 
 interface IPlace {
   id: string;
@@ -31,6 +31,7 @@ const ViewPlaceMap: FC<IProps> = ({
     longitude: place.longitude,
     zoom: 13,
   });
+  const isMinWidthXl = minWidthXl();
 
   useEffect(() => {
     setViewport({ ...searchedViewport, zoom: 13 });
@@ -41,7 +42,7 @@ const ViewPlaceMap: FC<IProps> = ({
       <Map
         viewport={viewport}
         width="100%"
-        height={minWidthXl() ? ViewportFullHeight : ViewportHalfHeight}
+        height={isMinWidthXl ? ViewportFullHeight : ViewportHalfHeight}
         minZoom={4}
         maxZoom={18}
         ref={mapRef}

src/components/ui/DropMenu.tsx

@@ -102,7 +102,7 @@ const DropMenu: DropMenuFC<IDropMenuProps> = ({
             animate={{ height: "auto", opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.15 }}
-            className="absolute overflow-hidden right-0 z-10 border rounded-md shadow-sm focus:outline-none bg-gray-800 border-gray-600"
+            className="absolute overflow-hidden right-0 z-20 border rounded-md shadow-sm focus:outline-none bg-gray-800 border-gray-600"
           >
             <RenderItems closeOnItemSelect={closeOnItemSelect}>
               {children}

styles/tailwind.scss

@@ -11,5 +11,5 @@ body {
 .mapboxgl-ctrl-bottom-right,
 .mapboxgl-ctrl-top-left,
 .mapboxgl-ctrl-top-right {
-  z-index: 0;
+  z-index: 0 !important;
 }