style: workspace sidebar scroll fix and improvement (#2934)

This commit is contained in:
Anmol Singh Bhatia 2023-11-29 13:32:35 +05:30 committed by GitHub
parent 404a61aee5
commit 537901f046
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -145,8 +145,10 @@ export const WorkspaceSidebarDropdown = observer(() => {
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="fixed left-4 z-20 mt-1 flex flex-col w-full max-w-[17rem] origin-top-left rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 shadow-lg outline-none"> <Menu.Items className="fixed left-4 z-20 mt-1 flex flex-col w-full max-w-[17rem] origin-top-left rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 shadow-lg outline-none">
<div className="flex flex-col items-start justify-start gap-3 p-3 max-h-96 overflow-y-scroll"> <div className="flex flex-col items-start justify-start gap-3 px-3 max-h-96 overflow-y-scroll">
<span className="text-sm font-medium text-custom-sidebar-text-200">Workspace</span> <span className="sticky top-0 bg-custom-background-100 pt-3 z-10 w-full h-full text-sm font-medium text-custom-sidebar-text-200">
Workspace
</span>
{workspaces ? ( {workspaces ? (
<div className="flex h-full w-full flex-col items-start justify-start gap-1.5"> <div className="flex h-full w-full flex-col items-start justify-start gap-1.5">
{workspaces.length > 0 ? ( {workspaces.length > 0 ? (
@ -195,18 +197,20 @@ export const WorkspaceSidebarDropdown = observer(() => {
) : ( ) : (
<p>No workspace found!</p> <p>No workspace found!</p>
)} )}
<Menu.Item <div className="sticky bottom-0 bg-custom-background-100 z-10 w-full h-full">
as="button" <Menu.Item
type="button" as="button"
onClick={() => { type="button"
setTrackElement("APP_SIEDEBAR_WORKSPACE_DROPDOWN"); onClick={() => {
router.push("/create-workspace"); setTrackElement("APP_SIEDEBAR_WORKSPACE_DROPDOWN");
}} router.push("/create-workspace");
className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80" }}
> className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
<Plus className="h-4 w-4" /> >
Create Workspace <Plus className="h-4 w-4" />
</Menu.Item> Create Workspace
</Menu.Item>
</div>
</div> </div>
) : ( ) : (
<div className="w-full"> <div className="w-full">