layout for comment button

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>
   );
 };