[ENG-548] Fix top bar menu padding (#765)

Fix top bar menu padding

interface/app/$libraryId/TopBar/TopBarMobile.tsx

@@ -1,14 +1,34 @@
 import { DotsThreeCircle } from 'phosphor-react';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, forwardRef } from 'react';
+import React from 'react';
 import { Popover } from '@sd/ui';
 import { TOP_BAR_ICON_STYLE, ToolOption } from '.';
-import TopBarButton from './TopBarButton';
+import TopBarButton, { TopBarButtonProps } from './TopBarButton';
+
+const GroupTool = forwardRef<
+	HTMLButtonElement,
+	Omit<TopBarButtonProps, 'children'> & { tool: ToolOption }
+>(({ tool, ...props }, ref) => {
+	return (
+		<TopBarButton
+			ref={ref}
+			className="!mr-0 w-full gap-1"
+			active={tool.topBarActive}
+			onClick={tool.onClick}
+			checkIcon
+			{...props}
+		>
+			{tool.icon}
+			{tool.toolTipLabel}
+		</TopBarButton>
+	);
+});
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
 	toolOptions?: ToolOption[][];
 }
 
-export default ({ className = '', toolOptions }: Props) => {
+export default ({ toolOptions, className }: Props) => {
 	const toolsNotSmFlex = toolOptions?.map((group) =>
 		group.filter((tool) => tool.showAtResolution !== 'sm:flex')
 	);
@@ -22,59 +42,30 @@ export default ({ className = '', toolOptions }: Props) => {
 					</TopBarButton>
 				}
 			>
-				<div className="flex flex-col overflow-hidden p-2">
-					{toolsNotSmFlex?.map((group, groupIndex) => {
-						return group.map(
-							(
-								{ icon, onClick, popOverComponent, toolTipLabel, topBarActive },
-								index
-							) => {
-								const groupCount = toolOptions?.length;
-								return (
-									<div key={toolTipLabel}>
-										{popOverComponent ? (
-											<Popover
-												className="focus:outline-none"
-												trigger={
-													<TopBarButton
-														className="mb-1 flex !w-full gap-1"
-														active={topBarActive}
-														onClick={onClick}
-														checkIcon={true}
-													>
-														<div className="flex w-full items-center justify-between">
-															<div className="flex items-center gap-1">
-																{icon}
-																{toolTipLabel}
-															</div>
-														</div>
-													</TopBarButton>
-												}
-											>
+				<div className="flex flex-col p-2">
+					{toolsNotSmFlex?.map((group, i) => (
+						<React.Fragment key={i}>
+							<div className="flex flex-col gap-1">
+								{group.map((tool) => (
+									<React.Fragment key={tool.toolTipLabel}>
+										{tool.popOverComponent ? (
+											<Popover trigger={<GroupTool tool={tool} />}>
 												<div className="block w-[250px] ">
-													{popOverComponent}
+													{tool.popOverComponent}
 												</div>
 											</Popover>
 										) : (
-											<TopBarButton
-												className="mb-1 flex !w-full gap-1"
-												active={topBarActive}
-												onClick={onClick ?? undefined}
-												checkIcon={true}
-											>
-												{icon}
-												{toolTipLabel}
-											</TopBarButton>
+											<GroupTool tool={tool} />
 										)}
-										{index === group.length - 1 &&
-											groupIndex + 1 !== groupCount && (
-												<div className="my-2 w-[100%] border-b border-app-line" />
-											)}
-									</div>
-								);
-							}
-						);
-					})}
+									</React.Fragment>
+								))}
+							</div>
+
+							{i !== 0 && i !== toolsNotSmFlex.length - 1 && (
+								<div className="my-2 border-b border-app-line" />
+							)}
+						</React.Fragment>
+					))}
 				</div>
 			</Popover>
 		</div>