binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2332 | 2295] style: UI improvements. (#5433)

Browse source 
* [WEB-2332] style: minor layout improvements.

* [WEB-2295] style: fix scrollbar padding in workspace list section of profile settings.

* style: add `app-container` css.
This commit is contained in:
Prateek Shourya 2024-08-27 14:26:09 +05:30 • committed by GitHub
parent 08c9bd7949
commit 83ceba3166
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/app/layout.tsx
View file

@ -72,10 +72,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
crossOrigin="use-credentials" crossOrigin="use-credentials"
/> />
</head> </head>
<body> <body className={`h-screen w-screen`}>
<div id="context-menu-portal" />
<AppProvider> <AppProvider>
<div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>{children}</div> <div className={`app-container h-full w-full flex flex-col overflow-hidden`}>
<div id="context-menu-portal" />
<div className="h-full w-full overflow-hidden bg-custom-background-100">{children}</div>
</div>
</AppProvider> </AppProvider>
</body> </body>
{process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && ( {process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (

2
web/app/profile/layout.tsx
View file

@ -19,7 +19,7 @@ export default function ProfileSettingsLayout(props: Props) {
<> <>
<CommandPalette /> <CommandPalette />
<AuthenticationWrapper> <AuthenticationWrapper>
<div className="relative flex h-screen w-full overflow-hidden"> <div className="relative flex h-full w-full overflow-hidden">
<ProfileLayoutSidebar /> <ProfileLayoutSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100"> <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
<div className="h-full w-full overflow-hidden">{children}</div> <div className="h-full w-full overflow-hidden">{children}</div>

21
web/app/profile/sidebar.tsx
View file

@ -12,6 +12,8 @@ import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
import { SidebarNavItem } from "@/components/sidebar"; import { SidebarNavItem } from "@/components/sidebar";
// constants // constants
import { PROFILE_ACTION_LINKS } from "@/constants/profile"; import { PROFILE_ACTION_LINKS } from "@/constants/profile";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks // hooks
import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store"; import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
@ -117,11 +119,11 @@ export const ProfileLayoutSidebar = observer(() => {
)} )}
</div> </div>
</Link> </Link>
<div className="flex flex-shrink-0 flex-col overflow-x-hidden px-4"> <div className="flex flex-shrink-0 flex-col overflow-x-hidden">
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6> <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
)} )}
<div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1 overflow-y-auto"> <div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
{PROFILE_ACTION_LINKS.map((link) => { {PROFILE_ACTION_LINKS.map((link) => {
if (link.key === "change-password" && currentUser?.is_password_autoset) return null; if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
@ -150,12 +152,17 @@ export const ProfileLayoutSidebar = observer(() => {
})} })}
</div> </div>
</div> </div>
<div className="flex flex-col overflow-x-hidden px-4"> <div className="flex flex-col overflow-x-hidden">
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6> <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
)} )}
{workspacesList && workspacesList.length > 0 && ( {workspacesList && workspacesList.length > 0 && (
<div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1.5 overflow-y-auto"> <div
className={cn("vertical-scrollbar scrollbar-xs mt-2 px-4 h-full space-y-1.5 overflow-y-auto", {
"scrollbar-sm": !sidebarCollapsed,
"ml-2.5 px-1": sidebarCollapsed,
})}
>
{workspacesList.map((workspace) => ( {workspacesList.map((workspace) => (
<Link <Link
key={workspace.id} key={workspace.id}
@ -193,7 +200,7 @@ export const ProfileLayoutSidebar = observer(() => {
))} ))}
</div> </div>
)} )}
<div className="mt-1.5"> <div className="mt-1.5 px-4">
{WORKSPACE_ACTION_LINKS.map((link) => ( {WORKSPACE_ACTION_LINKS.map((link) => (
<Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}> <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
<Tooltip <Tooltip

6
web/styles/globals.css
View file

@ -359,6 +359,12 @@ body {
color: rgba(var(--color-text-100)); color: rgba(var(--color-text-100));
} }
.app-container {
contain: layout style size;
contain-intrinsic-size: 100%;
position: relative; /* Ensure it's the containing block */
}
/* scrollbar style */ /* scrollbar style */
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;