Fix extrude button (#3718)

* Fix: regression on command bar buttons (remove drag)

* Revert "Fix: regression on command bar buttons (remove drag)"

This reverts commit 2404bcdf31.

* Make all elements opt-out of drag behavior by default, add comments around drag attribute

* Add vendor-specific user-select

* It won't do to make all elements opt-out, it ends up swallowing the drag events themselves!

* Sneaking in this email truncation nit that's bothered me

* Gotta remove that one more attempt at a generic "we made this clickable" element

* Make orbit continue to work when dragging over the AppHeader

---------

Co-authored-by: Frank Noirot <frank@kittycad.io>

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}
       />

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 */
+  user-select: none;
-}
+  -webkit-user-select: none;
-
+  /* Make the header act as a handle to drag the electron app window,
-.header button {
+   * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
-  -webkit-app-region: no-drag; /* Make the button not draggable */
+   * all interactive elements opt-out of this behavior by default in src/index.css
-}
+  */
-
+  -webkit-app-region: drag;
-.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 */
 }

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}

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}

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;