diff --git a/src/App.tsx b/src/App.tsx
index e743e979c..1450a5f67 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -119,6 +119,15 @@ export function App() {
           paneOpacity +
           (context.store?.buttonDownInStream ? ' pointer-events-none' : '')
         }
+        // Override the electron window draggable region behavior as well
+        // when the button is down in the stream
+        style={
+          {
+            '-webkit-app-region': context.store?.buttonDownInStream
+              ? 'no-drag'
+              : '',
+          } as React.CSSProperties
+        }
         project={{ project, file }}
         enableMenu={true}
       />
diff --git a/src/components/AppHeader.module.css b/src/components/AppHeader.module.css
index f986adeaa..a17f1b718 100644
--- a/src/components/AppHeader.module.css
+++ b/src/components/AppHeader.module.css
@@ -4,21 +4,11 @@
  */
 .header {
   grid-template-columns: 1fr auto 1fr;
-  -webkit-app-region: drag; /* Make the header of the app draggable */
-}
-
-.header button {
-  -webkit-app-region: no-drag; /* Make the button not draggable */
-}
-
-.header a {
-  -webkit-app-region: no-drag; /* Make the link not draggable */
-}
-
-.header textarea {
-  -webkit-app-region: no-drag; /* Make the textarea not draggable */
-}
-
-.header input {
-  -webkit-app-region: no-drag; /* Make the input not draggable */
+  user-select: none;
+  -webkit-user-select: none;
+  /* Make the header act as a handle to drag the electron app window,
+   * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
+   * all interactive elements opt-out of this behavior by default in src/index.css
+  */
+  -webkit-app-region: drag;
 }
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
index 7543af27f..21bcc058a 100644
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@@ -12,6 +12,7 @@ interface AppHeaderProps extends React.PropsWithChildren {
   project?: Omit<IndexLoaderData, 'code'>
   className?: string
   enableMenu?: boolean
+  style?: React.CSSProperties
 }
 
 export const AppHeader = ({
@@ -19,6 +20,7 @@ export const AppHeader = ({
   project,
   children,
   className = '',
+  style,
   enableMenu = false,
 }: AppHeaderProps) => {
   const { auth } = useSettingsAuthContext()
@@ -33,6 +35,7 @@ export const AppHeader = ({
         ' overlaid-panes sticky top-0 z-20 px-2 items-start ' +
         className
       }
+      style={style}
     >
       <ProjectSidebarMenu
         enableMenu={enableMenu}
diff --git a/src/components/UserSidebarMenu.tsx b/src/components/UserSidebarMenu.tsx
index 193b6361e..42033a6f4 100644
--- a/src/components/UserSidebarMenu.tsx
+++ b/src/components/UserSidebarMenu.tsx
@@ -217,7 +217,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                   </p>
                   {displayedName !== user.email && (
                     <p
-                      className="m-0 text-chalkboard-70 dark:text-chalkboard-40 text-xs"
+                      className="m-0 overflow-ellipsis overflow-hidden text-chalkboard-70 dark:text-chalkboard-40 text-xs"
                       data-testid="email"
                     >
                       {user.email}
diff --git a/src/index.css b/src/index.css
index 828dae9b9..a32274dc0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,6 +4,18 @@
 @tailwind components;
 @tailwind utilities;
 
+button,
+input,
+select,
+textarea,
+a {
+  /* Make all interactive elements not act as handles
+   * to drag the electron app window by default,
+   * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
+  */
+  -webkit-app-region: no-drag;
+}
+
 body {
   margin: 0;
   @apply font-sans;