diff --git a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx index c1d4d1206263c5392b481c06f990f482b9f62b16..cc0ddb9e7fac72893b3f433b75864e9374364806 100644 --- a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx +++ b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx @@ -46,26 +46,33 @@ export const MapNavigation = (): JSX.Element => { }; return ( - <div className="flex h-10 w-full flex-row flex-nowrap justify-start overflow-y-auto bg-white-pearl text-xs shadow-primary"> - {openedMaps.map(map => ( - <Button - key={map.modelId} - className={twMerge( - 'h-10 whitespace-nowrap', - isActive(map.modelId) ? 'bg-[#EBF4FF]' : 'font-normal', - )} - variantStyles={isActive(map.modelId) ? 'secondary' : 'ghost'} - onClick={(): void => onSubmapTabClick(map)} - > - {map.modelName} - {isNotMainMap(map.modelName) && ( - // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions - <div onClick={(event): void => onCloseSubmap(event, map)} data-testid="close-icon"> - <Icon name="close" className="ml-3 h-5 w-5 fill-font-400" /> - </div> - )} + <div className="flex h-10 w-full flex-row flex-nowrap justify-between overflow-y-auto bg-white-pearl text-xs shadow-primary"> + <div className="flex flex-row items-center justify-start"> + {openedMaps.map(map => ( + <Button + key={map.modelId} + className={twMerge( + 'relative h-10 whitespace-nowrap', + isActive(map.modelId) ? 'bg-[#EBF4FF]' : 'font-normal', + )} + variantStyles={isActive(map.modelId) ? 'secondary' : 'ghost'} + onClick={(): void => onSubmapTabClick(map)} + > + {map.modelName} + {isNotMainMap(map.modelName) && ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions + <div onClick={(event): void => onCloseSubmap(event, map)} data-testid="close-icon"> + <Icon name="close" className="ml-3 h-5 w-5 fill-font-400" /> + </div> + )} + </Button> + ))} + </div> + <div className="flex items-center"> + <Button className="mx-4 flex-none" variantStyles="secondary"> + Comments </Button> - ))} + </div> </div> ); };