Bugfix/6266 map layout and zoom

src/components/map/mapbox/Map.tsx

@@ -208,4 +208,4 @@ const ReactMap = ({
 
 export default ReactMap;
 
-export { styles, MapDefaultConfig as MapDefault };
+export { styles };

src/components/map/mapbox/constants.ts

@@ -1,7 +1,9 @@
 export const MapDefaultConfig = {
   // Magic number, try and error by experience
   DEBOUNCE_BEFORE_EVENT_FIRE: 700,
-  ZOOM: 4,
+  ZOOM: 3.5,
+  ZOOM_TABLET: 3,
+  ZOOM_MOBILE: 2,
   MIN_ZOOM: 1,
   MAX_ZOOM: 12,
   PROJECTION: "equirectangular",

src/components/map/mapbox/controls/ToggleControl.tsx

@@ -35,7 +35,7 @@ const ToggleButton: React.FC<ToggleControlProps> = ({
       }}
     >
       {showFullMap ? (
-        <CloseFullscreenIcon fontSize="medium" />
+        <CloseFullscreenIcon fontSize="small" />
       ) : (
         <FullscreenIcon fontSize="medium" />
       )}

src/components/map/mapbox/controls/menu/BaseMapSwitcher.tsx

@@ -6,7 +6,7 @@ import {
   MenuClickedEvent,
 } from "./Definition";
 import PublicIcon from "@mui/icons-material/Public";
-import { styles as mapStyles, MapDefault } from "../../Map";
+import { styles as mapStyles } from "../../Map";
 import {
   Box,
   Typography,
@@ -24,6 +24,7 @@ import { eventEmitter, leftPadding, rightPadding } from "./MenuControl";
 import grey from "../../../../common/colors/grey";
 import blue from "../../../../common/colors/blue";
 import { borderRadius, fontSize } from "../../../../../styles/constants";
+import { MapDefaultConfig } from "../../constants";
 
 interface BaseMapSwitcherProps extends ControlProps {
   // Static layer to be added to the switch
@@ -43,7 +44,7 @@ const BaseMapSwitcher: React.FC<BaseMapSwitcherProps> = ({
   onEvent,
 }) => {
   const [currentStyle, setCurrentStyle] = useState<string>(
-    mapStyles[MapDefault.DEFAULT_STYLE].id
+    mapStyles[MapDefaultConfig.DEFAULT_STYLE].id
   );
   // Must init the map so that it will not throw error indicate uncontrol to control component
   const [overlaysChecked, setOverlaysChecked] = useState<Map<string, boolean>>(

src/components/search/Searchbar.tsx

@@ -124,6 +124,9 @@ const Searchbar: FC<SearchbarProps> = ({ setShouldExpandSearchbar }) => {
           activeButton={activeButton}
           handleClickButton={handleClickButton}
           shouldExpandAllButtons={isMobile ? false : shouldExpandAllButtons}
+          shouldShrinkAllButtons={
+            isMobile && location.pathname === pageDefault.search
+          }
           sx={{ pr: gap.md }}
         />
       </Paper>

src/components/search/SearchbarButtonGroup.tsx

@@ -22,6 +22,7 @@ interface SearchbarButtonGroupProps {
   activeButton: SearchbarButtonNames;
   handleClickButton: (button: SearchbarButtonNames) => void;
   shouldExpandAllButtons: boolean;
+  shouldShrinkAllButtons?: boolean;
   sx?: SxProps;
 }
 
@@ -70,6 +71,7 @@ const SearchbarButtonGroup: FC<SearchbarButtonGroupProps> = ({
   activeButton,
   handleClickButton,
   shouldExpandAllButtons = false,
+  shouldShrinkAllButtons = false,
   sx,
 }) => {
   const componentParams: ParameterState = getComponentState(store.getState());
@@ -125,9 +127,11 @@ const SearchbarButtonGroup: FC<SearchbarButtonGroupProps> = ({
         dotBadge
         onClick={() => handleClickButton(SearchbarButtonNames.Date)}
         showText={
-          shouldExpandAllButtons
-            ? true
-            : activeButton === SearchbarButtonNames.Date
+          shouldShrinkAllButtons
+            ? false
+            : shouldExpandAllButtons
+              ? true
+              : activeButton === SearchbarButtonNames.Date
         }
         data-testid="date-range-button"
       />
@@ -138,9 +142,11 @@ const SearchbarButtonGroup: FC<SearchbarButtonGroupProps> = ({
         dotBadge
         onClick={() => handleClickButton(SearchbarButtonNames.Location)}
         showText={
-          shouldExpandAllButtons
-            ? true
-            : activeButton === SearchbarButtonNames.Location
+          shouldShrinkAllButtons
+            ? false
+            : shouldExpandAllButtons
+              ? true
+              : activeButton === SearchbarButtonNames.Location
         }
         data-testid="location-button"
       />
@@ -150,9 +156,11 @@ const SearchbarButtonGroup: FC<SearchbarButtonGroupProps> = ({
         badgeContent={filterCount}
         onClick={() => handleClickButton(SearchbarButtonNames.Filter)}
         showText={
-          shouldExpandAllButtons
-            ? true
-            : activeButton === SearchbarButtonNames.Filter
+          shouldShrinkAllButtons
+            ? false
+            : shouldExpandAllButtons
+              ? true
+              : activeButton === SearchbarButtonNames.Filter
         }
         data-testid="filtersBtn"
       />
@@ -161,9 +169,11 @@ const SearchbarButtonGroup: FC<SearchbarButtonGroupProps> = ({
         text={capitalizeFirstLetter(SearchbarButtonNames.Search)}
         onClick={handleSearchClick}
         showText={
-          shouldExpandAllButtons
-            ? true
-            : activeButton === SearchbarButtonNames.Search
+          shouldShrinkAllButtons
+            ? false
+            : shouldExpandAllButtons
+              ? true
+              : activeButton === SearchbarButtonNames.Search
         }
         buttonSx={{
           color: "#fff",

src/pages/search-page/SearchPage.tsx

@@ -42,11 +42,13 @@ import {
   SEARCH_PAGE_CONTENT_CONTAINER_HEIGHT_ABOVE_LAPTOP,
   SEARCH_PAGE_CONTENT_CONTAINER_HEIGHT_UNDER_LAPTOP,
   SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_LIST,
-  SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP,
   SEARCH_PAGE_MAP_CONTAINER_HEIGHT_ABOVE_LAPTOP,
   SEARCH_PAGE_MAP_CONTAINER_HEIGHT_UNDER_LAPTOP,
+  SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP_TABLET,
+  SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP_MOBILE,
 } from "./constants";
 import useBreakpoint from "../../hooks/useBreakpoint";
+import { MapDefaultConfig } from "../../components/map/mapbox/constants";
 
 const REFERER = "SEARCH_PAGE";
 
@@ -69,7 +71,7 @@ const SearchPage = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const { isUnderLaptop } = useBreakpoint();
+  const { isUnderLaptop, isMobile } = useBreakpoint();
 
   // Layers contains record with uuid and bbox only
   const [layers, setLayers] = useState<Array<OGCCollection>>([]);
@@ -88,7 +90,13 @@ const SearchPage = () => {
   //State to store the uuid of a selected dataset
   const [selectedUuids, setSelectedUuids] = useState<Array<string>>([]);
   const [bbox, setBbox] = useState<LngLatBounds | undefined>(undefined);
-  const [zoom, setZoom] = useState<number | undefined>(undefined);
+  const [zoom, setZoom] = useState<number | undefined>(
+    isUnderLaptop
+      ? isMobile
+        ? MapDefaultConfig.ZOOM_MOBILE
+        : MapDefaultConfig.ZOOM_TABLET
+      : undefined
+  );
   const [loadingThreadCount, setLoadingThreadCount] = useState<number>(0);
 
   const startOneLoadingThread = useCallback(() => {
@@ -356,6 +364,7 @@ const SearchPage = () => {
   // TODO: Optimize call if possible, this happens when navigate from page
   // to this page.
   useEffect(() => handleNavigation(), [handleNavigation]);
+
   useEffect(() => {
     const bookmarkSelected = async (event: BookmarkEvent) => {
       if (event.action === EVENT_BOOKMARK.EXPAND) {
@@ -381,7 +390,7 @@ const SearchPage = () => {
           height: {
             xs:
               selectedLayout === SearchResultLayoutEnum.FULL_MAP
-                ? SEARCH_PAGE_CONTENT_CONTAINER_HEIGHT_ABOVE_LAPTOP
+                ? "auto"
                 : SEARCH_PAGE_CONTENT_CONTAINER_HEIGHT_UNDER_LAPTOP,
             md: SEARCH_PAGE_CONTENT_CONTAINER_HEIGHT_ABOVE_LAPTOP,
           },
@@ -390,15 +399,15 @@ const SearchPage = () => {
           padding: padding.small,
           bgcolor: color.blue.light,
         }}
-        gap={2}
+        gap={selectedLayout === SearchResultLayoutEnum.FULL_MAP ? 0 : 2}
       >
         <Box
           sx={{
             flex: isUnderLaptop ? 1 : "none",
             width:
               selectedLayout === SearchResultLayoutEnum.FULL_LIST
                 ? "100%"
-                : "none",
+                : "auto",
             height:
               selectedLayout === SearchResultLayoutEnum.FULL_MAP ? 0 : "auto",
           }}
@@ -423,7 +432,9 @@ const SearchPage = () => {
               ? selectedLayout === SearchResultLayoutEnum.FULL_LIST
                 ? SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_LIST
                 : selectedLayout === SearchResultLayoutEnum.FULL_MAP
-                  ? SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP
+                  ? isMobile
+                    ? SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP_MOBILE
+                    : SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP_TABLET
                   : SEARCH_PAGE_MAP_CONTAINER_HEIGHT_UNDER_LAPTOP
               : SEARCH_PAGE_MAP_CONTAINER_HEIGHT_ABOVE_LAPTOP,
           }}

src/pages/search-page/constants.tsx

@@ -2,9 +2,10 @@ export const SEARCH_PAGE_CONTENT_CONTAINER_HEIGHT_ABOVE_LAPTOP = "85vh";
 export const SEARCH_PAGE_CONTENT_CONTAINER_HEIGHT_UNDER_LAPTOP = 1500;
 
 export const SEARCH_PAGE_MAP_CONTAINER_HEIGHT_ABOVE_LAPTOP = "100%";
-export const SEARCH_PAGE_MAP_CONTAINER_HEIGHT_UNDER_LAPTOP = 400;
+export const SEARCH_PAGE_MAP_CONTAINER_HEIGHT_UNDER_LAPTOP = "65vh";
 
-export const SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP = "80vh";
+export const SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP_TABLET = "80vh";
+export const SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_MAP_MOBILE = "70vh";
 export const SEARCH_PAGE_MAP_CONTAINER_HEIGHT_FULL_LIST = 0;
 
 export const SEARCH_PAGE_RESULT_SECTION_CONTAINER_MIN_WIDTH = 500;