fix: Enlarge scrollable area in sidebar for improved UX on small screens

app/components/Scrollable.js

@@ -8,9 +8,10 @@ type Props = {|
   shadow?: boolean,
   topShadow?: boolean,
   bottomShadow?: boolean,
+  flex?: boolean,
 |};
 
-function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
+function Scrollable({ shadow, topShadow, bottomShadow, flex, ...rest }: Props) {
   const ref = React.useRef<?HTMLDivElement>();
   const [topShadowVisible, setTopShadow] = React.useState(false);
   const [bottomShadowVisible, setBottomShadow] = React.useState(false);
@@ -42,6 +43,7 @@ function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
     <Wrapper
       ref={ref}
       onScroll={updateShadows}
+      $flex={flex}
       $topShadowVisible={topShadowVisible}
       $bottomShadowVisible={bottomShadowVisible}
       {...rest}
@@ -50,6 +52,8 @@ function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
 }
 
 const Wrapper = styled.div`
+  display: ${(props) => (props.$flex ? "flex" : "block")};
+  flex-direction: column;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;

app/components/Sidebar/Main.js

@@ -81,96 +81,92 @@ function MainSidebar() {
           />
         )}
       </AccountMenu>
-      <Flex auto column>
+      <Scrollable flex topShadow>
-        <Scrollable shadow>
+        <Section>
-          <Section>
+          <SidebarLink
+            to="/home"
+            icon={<HomeIcon color="currentColor" />}
+            exact={false}
+            label={t("Home")}
+          />
+          <SidebarLink
+            to={{
+              pathname: "/search",
+              state: { fromMenu: true },
+            }}
+            icon={<SearchIcon color="currentColor" />}
+            label={t("Search")}
+            exact={false}
+          />
+          <SidebarLink
+            to="/starred"
+            icon={<StarredIcon color="currentColor" />}
+            exact={false}
+            label={t("Starred")}
+          />
+          <SidebarLink
+            to="/templates"
+            icon={<ShapesIcon color="currentColor" />}
+            exact={false}
+            label={t("Templates")}
+            active={documents.active ? documents.active.template : undefined}
+          />
+          <SidebarLink
+            to="/drafts"
+            icon={<EditIcon color="currentColor" />}
+            label={
+              <Drafts align="center">
+                {t("Drafts")}
+                <Bubble count={documents.totalDrafts} />
+              </Drafts>
+            }
+            active={
+              documents.active
+                ? !documents.active.publishedAt &&
+                  !documents.active.isDeleted &&
+                  !documents.active.isTemplate
+                : undefined
+            }
+          />
+        </Section>
+        <Section auto>
+          <Collections onCreateCollection={handleCreateCollectionModalOpen} />
+        </Section>
+        <Section>
+          <SidebarLink
+            to="/archive"
+            icon={<ArchiveIcon color="currentColor" />}
+            exact={false}
+            label={t("Archive")}
+            active={
+              documents.active
+                ? documents.active.isArchived && !documents.active.isDeleted
+                : undefined
+            }
+          />
+          <SidebarLink
+            to="/trash"
+            icon={<TrashIcon color="currentColor" />}
+            exact={false}
+            label={t("Trash")}
+            active={documents.active ? documents.active.isDeleted : undefined}
+          />
+          <SidebarLink
+            to="/settings"
+            icon={<SettingsIcon color="currentColor" />}
+            exact={false}
+            label={t("Settings")}
+          />
+          {can.invite && (
             <SidebarLink
-              to="/home"
+              to="/settings/people"
-              icon={<HomeIcon color="currentColor" />}
+              onClick={handleInviteModalOpen}
-              exact={false}
+              icon={<PlusIcon color="currentColor" />}
-              label={t("Home")}
+              label={`${t("Invite people")}…`}
             />
-            <SidebarLink
+          )}
-              to={{
+        </Section>
-                pathname: "/search",
+      </Scrollable>
-                state: { fromMenu: true },
-              }}
-              icon={<SearchIcon color="currentColor" />}
-              label={t("Search")}
-              exact={false}
-            />
-            <SidebarLink
-              to="/starred"
-              icon={<StarredIcon color="currentColor" />}
-              exact={false}
-              label={t("Starred")}
-            />
-            <SidebarLink
-              to="/templates"
-              icon={<ShapesIcon color="currentColor" />}
-              exact={false}
-              label={t("Templates")}
-              active={documents.active ? documents.active.template : undefined}
-            />
-            <SidebarLink
-              to="/drafts"
-              icon={<EditIcon color="currentColor" />}
-              label={
-                <Drafts align="center">
-                  {t("Drafts")}
-                  <Bubble count={documents.totalDrafts} />
-                </Drafts>
-              }
-              active={
-                documents.active
-                  ? !documents.active.publishedAt &&
-                    !documents.active.isDeleted &&
-                    !documents.active.isTemplate
-                  : undefined
-              }
-            />
-          </Section>
-          <Section>
-            <Collections onCreateCollection={handleCreateCollectionModalOpen} />
-          </Section>
-        </Scrollable>
-        <Secondary>
-          <Section>
-            <SidebarLink
-              to="/archive"
-              icon={<ArchiveIcon color="currentColor" />}
-              exact={false}
-              label={t("Archive")}
-              active={
-                documents.active
-                  ? documents.active.isArchived && !documents.active.isDeleted
-                  : undefined
-              }
-            />
-            <SidebarLink
-              to="/trash"
-              icon={<TrashIcon color="currentColor" />}
-              exact={false}
-              label={t("Trash")}
-              active={documents.active ? documents.active.isDeleted : undefined}
-            />
-            <SidebarLink
-              to="/settings"
-              icon={<SettingsIcon color="currentColor" />}
-              exact={false}
-              label={t("Settings")}
-            />
-            {can.invite && (
-              <SidebarLink
-                to="/settings/people"
-                onClick={handleInviteModalOpen}
-                icon={<PlusIcon color="currentColor" />}
-                label={`${t("Invite people")}…`}
-              />
-            )}
-          </Section>
-        </Secondary>
-      </Flex>
       {can.invite && (
         <Modal
           title={t("Invite people")}
@@ -191,11 +187,6 @@ function MainSidebar() {
   );
 }
 
-const Secondary = styled.div`
-  overflow-x: hidden;
-  flex-shrink: 0;
-`;
-
 const Drafts = styled(Flex)`
   height: 24px;
 `;

app/components/Sidebar/components/Section.js

@@ -5,9 +5,13 @@ import Flex from "components/Flex";
 const Section = styled(Flex)`
   position: relative;
   flex-direction: column;
-  margin: 20px 8px;
+  margin: 0 8px 20px;
   min-width: ${(props) => props.theme.sidebarMinWidth}px;
   flex-shrink: 0;
+
+  &:first-child {
+    margin-top: 20px;
+  }
 `;
 
 export default Section;