fix: Scrolling in desktop app sidebar is finicky

app/components/Sidebar/App.tsx

@@ -26,7 +26,9 @@ import Sidebar from "./Sidebar";
 import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import DragPlaceholder from "./components/DragPlaceholder";
-import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
+import FullWidthButton, {
+  FullWidthButtonProps,
+} from "./components/FullWidthButton";
 import HistoryNavigation from "./components/HistoryNavigation";
 import Section from "./components/Section";
 import SidebarAction from "./components/SidebarAction";
@@ -65,8 +67,8 @@ function AppSidebar() {
           <DragPlaceholder />
 
           <OrganizationMenu>
-            {(props: HeaderButtonProps) => (
+            {(props: FullWidthButtonProps) => (
-              <HeaderButton
+              <FullWidthButton
                 {...props}
                 title={team.name}
                 image={

app/components/Sidebar/Settings.tsx

@@ -11,8 +11,8 @@ import useSettingsConfig from "~/hooks/useSettingsConfig";
 import Desktop from "~/utils/Desktop";
 import isCloudHosted from "~/utils/isCloudHosted";
 import Sidebar from "./Sidebar";
+import FullWidthButton from "./components/FullWidthButton";
 import Header from "./components/Header";
-import HeaderButton from "./components/HeaderButton";
 import HistoryNavigation from "./components/HistoryNavigation";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
@@ -31,7 +31,7 @@ function SettingsSidebar() {
   return (
     <Sidebar>
       <HistoryNavigation />
-      <HeaderButton
+      <FullWidthButton
         title={t("Return to App")}
         image={<StyledBackIcon />}
         onClick={returnToApp}

app/components/Sidebar/Shared.tsx

@@ -11,7 +11,7 @@ import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
-import HeaderButton from "./components/HeaderButton";
+import FullWidthButton from "./components/FullWidthButton";
 import Section from "./components/Section";
 import DocumentLink from "./components/SharedDocumentLink";
 
@@ -28,7 +28,7 @@ function SharedSidebar({ rootNode, shareId }: Props) {
   return (
     <Sidebar>
       {team && (
-        <HeaderButton
+        <FullWidthButton
           title={team.name}
           image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
           onClick={() =>

app/components/Sidebar/Sidebar.tsx

@@ -11,13 +11,15 @@ import useMenuContext from "~/hooks/useMenuContext";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
-import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
+import { fadeOnDesktopBackgrounded } from "~/styles";
 import { fadeIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import Avatar from "../Avatar";
 import NotificationIcon from "../Notifications/NotificationIcon";
 import NotificationsPopover from "../Notifications/NotificationsPopover";
-import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
+import FullWidthButton, {
+  FullWidthButtonProps,
+} from "./components/FullWidthButton";
 import ResizeBorder from "./components/ResizeBorder";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 
@@ -175,11 +177,12 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
 
         {user && (
           <AccountMenu>
-            {(props: HeaderButtonProps) => (
+            {(props: FullWidthButtonProps) => (
-              <HeaderButton
+              <FullWidthButton
                 {...props}
                 showMoreMenu
                 title={user.name}
+                position="bottom"
                 image={
                   <StyledAvatar
                     alt={user.name}
@@ -190,11 +193,15 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
                 }
               >
                 <NotificationsPopover>
-                  {(rest: HeaderButtonProps) => (
+                  {(rest: FullWidthButtonProps) => (
-                    <HeaderButton {...rest} image={<NotificationIcon />} />
+                    <FullWidthButton
+                      {...rest}
+                      position="bottom"
+                      image={<NotificationIcon />}
+                    />
                   )}
                 </NotificationsPopover>
-              </HeaderButton>
+              </FullWidthButton>
             )}
           </AccountMenu>
         )}
@@ -259,8 +266,6 @@ const Container = styled(Flex)<ContainerProps>`
   z-index: ${depths.sidebar};
   max-width: 80%;
   min-width: 280px;
-  padding-top: ${Desktop.hasInsetTitlebar() ? 36 : 0}px;
-  ${draggableOnDesktop()}
   ${fadeOnDesktopBackgrounded()}
 
   ${Positioner} {

app/components/Sidebar/components/FullWidthButton.tsx

@@ -3,9 +3,11 @@ import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
-import { undraggableOnDesktop } from "~/styles";
+import { draggableOnDesktop, undraggableOnDesktop } from "~/styles";
+import Desktop from "~/utils/Desktop";
 
-export type HeaderButtonProps = React.ComponentProps<typeof Button> & {
+export type FullWidthButtonProps = React.ComponentProps<typeof Button> & {
+  position: "top" | "bottom";
   title: React.ReactNode;
   image: React.ReactNode;
   minHeight?: number;
@@ -16,40 +18,53 @@ export type HeaderButtonProps = React.ComponentProps<typeof Button> & {
   children?: React.ReactNode;
 };
 
-const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
+const FullWidthButton = React.forwardRef<
-  function _HeaderButton(
+  HTMLButtonElement,
-    {
+  FullWidthButtonProps
-      showDisclosure,
+>(function _FullWidthButton(
-      showMoreMenu,
+  {
-      image,
+    position = "top",
-      title,
+    showDisclosure,
-      minHeight = 0,
+    showMoreMenu,
-      children,
+    image,
-      ...rest
+    title,
-    }: HeaderButtonProps,
+    minHeight = 0,
-    ref
+    children,
-  ) {
+    ...rest
-    return (
+  }: FullWidthButtonProps,
-      <Flex justify="space-between" align="center" shrink={false}>
+  ref
-        <Button
+) {
-          {...rest}
+  return (
-          minHeight={minHeight}
+    <Container
-          as="button"
+      justify="space-between"
-          ref={ref}
+      align="center"
-          role="button"
+      shrink={false}
-        >
+      $position={position}
-          <Title gap={8} align="center">
+    >
-            {image}
+      <Button
-            {title}
+        {...rest}
-          </Title>
+        minHeight={minHeight}
-          {showDisclosure && <ExpandedIcon />}
+        as="button"
-          {showMoreMenu && <MoreIcon />}
+        ref={ref}
-        </Button>
+        role="button"
-        {children}
+      >
-      </Flex>
+        <Title gap={8} align="center">
-    );
+          {image}
-  }
+          {title}
-);
+        </Title>
+        {showDisclosure && <ExpandedIcon />}
+        {showMoreMenu && <MoreIcon />}
+      </Button>
+      {children}
+    </Container>
+  );
+});
+
+const Container = styled(Flex)<{ $position: "top" | "bottom" }>`
+  padding-top: ${(props) =>
+    props.$position === "top" && Desktop.hasInsetTitlebar() ? 36 : 0}px;
+  ${draggableOnDesktop()}
+`;
 
 const Title = styled(Flex)`
   color: ${s("text")};
@@ -99,4 +114,4 @@ const Button = styled(Flex)<{ minHeight: number }>`
   }
 `;
 
-export default HeaderButton;
+export default FullWidthButton;