fix: Various small layout issues with mobile

app/components/Sidebar/App.tsx

@@ -31,6 +31,7 @@ import SidebarLink from "./components/SidebarLink";
 import Starred from "./components/Starred";
 import ToggleButton from "./components/ToggleButton";
 import TrashLink from "./components/TrashLink";
+import useMobile from "~/hooks/useMobile";
 
 function AppSidebar() {
   const { t } = useTranslation();
@@ -39,6 +40,7 @@ function AppSidebar() {
   const user = useCurrentUser();
   const can = usePolicy(team);
   const history = useHistory();
+  const isMobile = useMobile();
 
   const handleSearchClick = useCallback(() => {
     const basePath = searchPath();
@@ -74,33 +76,29 @@ function AppSidebar() {
           <TeamMenu>
             <SidebarButton
               title={team.name}
-              image={
-                <TeamLogo
-                  model={team}
-                  size={24}
-                  alt={t("Logo")}
-                  style={{ insetInlineStart: 4 }}
-                />
-              }
+              image={<TeamLogo model={team} size={24} alt={t("Logo")} />}
             >
-              <Tooltip
-                content={t("Toggle sidebar")}
-                shortcut={`${metaDisplay}+.`}
-              >
-                <ToggleButton
-                  position="bottom"
-                  image={<SidebarIcon />}
-                  aria-label={
-                    ui.sidebarCollapsed
-                      ? t("Expand sidebar")
-                      : t("Collapse sidebar")
-                  }
-                  onClick={() => {
-                    ui.toggleCollapsedSidebar();
-                    (document.activeElement as HTMLElement)?.blur();
-                  }}
-                />
-              </Tooltip>
+              {isMobile ? null : (
+                <Tooltip
+                  content={t("Toggle sidebar")}
+                  shortcut={`${metaDisplay}+.`}
+                >
+                  <ToggleButton
+                    position="bottom"
+                    image={<SidebarIcon />}
+                    aria-label={
+                      ui.sidebarCollapsed
+                        ? t("Expand sidebar")
+                        : t("Collapse sidebar")
+                    }
+                    style={{ paddingInline: 4 }}
+                    onClick={() => {
+                      ui.toggleCollapsedSidebar();
+                      (document.activeElement as HTMLElement)?.blur();
+                    }}
+                  />
+                </Tooltip>
+              )}
             </SidebarButton>
           </TeamMenu>
           <Overflow>

app/components/Sidebar/Settings.tsx

@@ -21,6 +21,7 @@ import SidebarButton from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import ToggleButton from "./components/ToggleButton";
 import Version from "./components/Version";
+import useMobile from "~/hooks/useMobile";
 
 function SettingsSidebar() {
   const { ui, integrations } = useStores();
@@ -28,6 +29,7 @@ function SettingsSidebar() {
   const history = useHistory();
   const location = useLocation();
   const configs = useSettingsConfig();
+  const isMobile = useMobile();
 
   const groupedConfig = groupBy(
     configs.filter((item) =>
@@ -49,19 +51,24 @@ function SettingsSidebar() {
         image={<StyledBackIcon />}
         onClick={returnToApp}
       >
-        <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
-          <ToggleButton
-            aria-label={
-              ui.sidebarCollapsed ? t("Expand sidebar") : t("Collapse sidebar")
-            }
-            position="bottom"
-            image={<SidebarIcon />}
-            onClick={() => {
-              ui.toggleCollapsedSidebar();
-              (document.activeElement as HTMLElement)?.blur();
-            }}
-          />
-        </Tooltip>
+        {isMobile ? null : (
+          <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
+            <ToggleButton
+              aria-label={
+                ui.sidebarCollapsed
+                  ? t("Expand sidebar")
+                  : t("Collapse sidebar")
+              }
+              position="bottom"
+              image={<SidebarIcon />}
+              style={{ paddingInline: 4 }}
+              onClick={() => {
+                ui.toggleCollapsedSidebar();
+                (document.activeElement as HTMLElement)?.blur();
+              }}
+            />
+          </Tooltip>
+        )}
       </SidebarButton>
 
       <Flex auto column>

app/components/Sidebar/Sidebar.tsx

@@ -265,7 +265,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
                   alt={t("Avatar of {{ name }}", { name: user.name })}
                   model={user}
                   size={24}
-                  style={{ marginInlineStart: 4 }}
                 />
               }
             >
@@ -274,6 +273,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
                   position="bottom"
                   image={<NotificationIcon />}
                   aria-label={t("Notifications")}
+                  style={{ paddingInline: 4 }}
                 />
               </NotificationsPopover>
             </SidebarButton>

app/components/Sidebar/components/SidebarButton.tsx

@@ -2,8 +2,8 @@ import { MoreIcon } from "outline-icons";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { extraArea, hover, s } from "@shared/styles";
-import { isMobile } from "@shared/utils/browser";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import { draggableOnDesktop, undraggableOnDesktop } from "~/styles";
@@ -89,12 +89,12 @@ const Button = styled(Flex)<{
   flex: 1;
   color: ${s("textTertiary")};
   align-items: center;
-  padding: ${isMobile() ? 12 : 4}px 4px;
+  padding: 12px;
   font-size: 15px;
   font-weight: 500;
   border-radius: 4px;
   border: 0;
-  margin: ${(props) => (!isMobile() && props.$position === "top" ? 16 : 8)}px 0;
+  margin: 8px;
   background: none;
   flex-shrink: 0;
 
@@ -106,24 +106,22 @@ const Button = styled(Flex)<{
 
   ${undraggableOnDesktop()}
   ${extraArea(4)}
+  ${breakpoint("tablet")`
+    padding: 8px;
+  `}
 
   &:not(:disabled) {
+    &: ${hover} {
+      background: ${s("sidebarHoverBackground")};
+    }
+
     &:active,
-    &:${hover},
     &[aria-expanded="true"] {
       color: ${s("sidebarText")};
       background: ${s("sidebarActiveBackground")};
       cursor: var(--pointer);
     }
   }
-
-  &:last-child {
-    margin-inline-end: 8px;
-  }
-
-  &:first-child {
-    margin-inline-start: 8px;
-  }
 `;
 
 export default SidebarButton;

app/scenes/Document/components/DocumentTitle.tsx

@@ -297,7 +297,7 @@ const StyledIconPicker = styled(IconPicker)`
 const Title = styled(ContentEditable)<TitleProps>`
   position: relative;
   line-height: ${lineHeight};
-  margin-top: 3vh;
+  margin-top: ${(props: TitleProps) => (props.$containsIcon ? "10vh" : "3vh")};
   margin-bottom: 0.5em;
   font-size: ${fontSize};
   font-weight: 600;