chore: fix dashboard logo on collapse & make name of org text bigger (#1019)

* fix dashboard logo on collapse

* Update Desktop.tsx

* ok

* Update globals.css

* Update globals.css

Author: ameer2468

apps/web/app/(org)/dashboard/_components/DashboardInner.tsx

@@ -171,12 +171,10 @@ export default function DashboardInner({
 			{/*End of NavBar*/}
 			<main
 				className={
-					"flex overscroll-contain flex-col flex-1 flex-grow p-5 h-full border border-b-0 custom-scroll bg-gray-2 border-gray-3 lg:rounded-tl-2xl lg:p-8"
+					"flex overscroll-contain flex-col flex-1 p-5 h-full border border-b-0 custom-scroll bg-gray-2 border-gray-3 lg:rounded-tl-2xl lg:p-8"
 				}
 			>
-				<div className="flex flex-col flex-1 flex-grow gap-4 min-h-fit">
-					{children}
-				</div>
+				<div className="flex flex-col flex-1 gap-4 min-h-fit">{children}</div>
 			</main>
 			{isSharedCapsPage && activeOrganization?.members && (
 				<MembersDialog

apps/web/app/(org)/dashboard/_components/MobileTab.tsx

@@ -92,7 +92,7 @@ const Orgs = ({
 					name={activeOrg?.organization.name ?? "No organization found"}
 				/>
 			)}
-			<p className="text-xs mr-2 text-gray-12 truncate w-fit max-w-[90px]">
+			<p className="text-sm mr-2 text-gray-12 truncate w-fit max-w-[90px]">
 				{activeOrg?.organization.name}
 			</p>
 			<ChevronDown

apps/web/app/(org)/dashboard/_components/Navbar/Desktop.tsx

@@ -26,45 +26,40 @@ export const DesktopNav = () => {
 				toggleSidebarCollapsed();
 			}
 		};
-
 		window.addEventListener("keydown", handleKeyDown);
-
-		return () => {
-			window.removeEventListener("keydown", handleKeyDown);
-		};
+		return () => window.removeEventListener("keydown", handleKeyDown);
 	}, [toggleSidebarCollapsed]);
 
 	return (
 		<motion.div
-			initial={{
-				width: sidebarCollapsed ? "70px" : "230px",
-			}}
+			initial={false}
 			animate={{
-				width: sidebarCollapsed ? "70px" : "230px",
+				width: sidebarCollapsed ? 70 : 230,
 				transition: {
 					duration: 0.6,
 					type: "spring",
 					bounce: 0.25,
 				},
 			}}
-			className={clsx("hidden z-50 h-full lg:flex group", "relative")}
+			className={clsx(
+				"hidden relative z-50 h-full will-change-[width] lg:flex group bg-gray-1",
+			)}
 		>
 			<div className="flex flex-col w-full max-w-[220px] mx-auto h-full">
 				<div className="flex justify-start items-center px-3 pt-5 mb-3.5 w-full truncate min-h-8">
 					<Link href="/dashboard">
 						<Logo
 							hideLogoName={sidebarCollapsed}
+							viewBoxDimensions={sidebarCollapsed ? "0 0 40 40" : "0 0 120 40"}
 							className="mx-auto w-[120px] h-[40px]"
 						/>
 					</Link>
 				</div>
-
 				<div className="flex overflow-y-auto flex-col flex-grow">
 					<div className="flex flex-col px-3 h-full">
 						<AdminNavItems />
 					</div>
 				</div>
-
 				<Tooltip
 					kbd={[cmdSymbol, "Shift", "S"]}
 					position="right"

apps/web/app/(org)/dashboard/layout.tsx

@@ -80,7 +80,7 @@ export default async function DashboardLayout({
 				userPreferences={userPreferences}
 			>
 				<div className="grid grid-cols-[auto,1fr] bg-gray-1 grid-rows-[auto,1fr] h-dvh min-h-dvh">
-					<aside className="hidden z-10 col-span-1 row-span-2 lg:flex">
+					<aside className="hidden z-10 col-span-1 row-span-2 w-full lg:flex">
 						<DesktopNav />
 					</aside>
 					<div className="flex col-span-2 row-span-2 h-full md:col-span-1 focus:outline-none">

apps/web/app/globals.css

@@ -594,12 +594,18 @@ slot:not(.dashboard-layout slot) {
 .hide-scroll::-webkit-scrollbar {
 	display: none;
 }
-
 /* Custom scrollbar */
 .custom-scroll {
 	overflow-y: auto;
+	scrollbar-gutter: stable;
 }
 
+/* Fallback for scrollbar-gutter */
+@supports not (scrollbar-gutter: stable) {
+	.custom-scroll {
+		padding-right: 3px; /* Reserve space for scrollbar */
+	}
+}
 .custom-scroll::-webkit-scrollbar {
 	width: 3px;
 	background-color: transparent;

packages/ui/src/components/icons/Logo.tsx

@@ -4,7 +4,7 @@ export const Logo = ({
 	showBeta,
 	white,
 	hideLogoName,
-	viewBoxDimensions,
+	viewBoxDimensions = "0 0 120 40",
 	style,
 }: {
 	className?: string;
@@ -18,7 +18,7 @@ export const Logo = ({
 	return (
 		<div className="flex items-center">
 			<svg
-				viewBox={viewBoxDimensions || "0 0 120 40"}
+				viewBox={viewBoxDimensions}
 				xmlns="http://www.w3.org/2000/svg"
 				preserveAspectRatio="xMidYMid meet"
 				fill="none"