fix padding issues #358

apps/oneclient/frontend/src/components/Navbar.tsx

@@ -31,41 +31,42 @@ export function Navbar() {
 				<NavbarLink to="./accounts">Accounts</NavbarLink>
 			</div>
 
-			<div className="flex flex-1 items-center justify-end gap-2 pointer-events-none">
-				<NavbarButton
-					children={<Settings02Icon height={28} width={28} />}
-					onClick={() => navigate({ to: '/app/settings' })}
-				/>
-				<Popup.Trigger>
-					<NavbarButton>
-						<AccountAvatar className="w-full h-full rounded-lg" uuid={currentAccount?.id} />
-					</NavbarButton>
+			<div className="flex flex-1 items-center justify-end gap-6 pointer-events-none">
+				<div className="flex gap-4">
+					<NavbarButton
+						children={<Settings02Icon height={28} width={28} />}
+						onClick={() => navigate({ to: '/app/settings' })}
+					/>
+					<Popup.Trigger>
+						<NavbarButton>
+							<AccountAvatar className="w-full h-full rounded-lg" uuid={currentAccount?.id} />
+						</NavbarButton>
+						<AccountPopup />
+					</Popup.Trigger>
+				</div>
 
-					<AccountPopup />
-				</Popup.Trigger>
-
-				<NavbarButton
-					children={<MinusIcon />}
-					onClick={onMinimize}
-				/>
-
-				<NavbarButton
-					children={<SquareIcon />}
-					onClick={onMaximize}
-				/>
-
-				<NavbarButton
-					children={(
-						<XCloseIcon
-							height={28}
-							strokeWidth={1.5}
-							width={28}
-						/>
-					)}
-					className="bg-transparent"
-					color="danger"
-					onClick={onClose}
-				/>
+				<div className="flex gap-2">
+					<NavbarButton
+						children={<MinusIcon />}
+						onClick={onMinimize}
+					/>
+					<NavbarButton
+						children={<SquareIcon />}
+						onClick={onMaximize}
+					/>
+					<NavbarButton
+						children={(
+							<XCloseIcon
+								height={28}
+								strokeWidth={1.5}
+								width={28}
+							/>
+						)}
+						className="bg-transparent"
+						color="danger"
+						onClick={onClose}
+					/>
+				</div>
 			</div>
 
 		</nav>

apps/oneclient/frontend/src/components/Tabs.tsx

@@ -15,7 +15,7 @@ export function TabList({
 		<div className="pointer-events-none sticky top-0 z-10 min-h-[74px] h-[74px] max-h-[74px] w-full" ref={ref}>
 			<div
 				className={twMerge(
-					'pointer-events-auto flex flex-row gap-2 border border-transparent bg-page-elevated transition-all',
+					'pointer-events-auto flex flex-row gap-4 border border-transparent bg-page-elevated transition-all',
 					floating
 						? 'px-6 mx-4 py-3 shadow-lg border-ghost-overlay rounded-xl'
 						: 'px-10 py-6 rounded-2xl',