Fix pointer window drag

src-web/components/RequestSettingsDropdown.tsx

@@ -1,11 +1,14 @@
-import { memo } from 'react';
 import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 
-export const RequestSettingsDropdown = memo(function RequestSettingsDropdown() {
+interface Props {
+  className?: string;
+}
+
+export function RequestSettingsDropdown({ className }: Props) {
   const activeRequestId = useActiveRequestId();
   const deleteRequest = useDeleteRequest(activeRequestId ?? null);
   return (
@@ -24,7 +27,7 @@ export const RequestSettingsDropdown = memo(function RequestSettingsDropdown() {
         },
       ]}
     >
-      <IconButton size="sm" title="Request Options" icon="gear" />
+      <IconButton className={className} size="sm" title="Request Options" icon="gear" />
     </Dropdown>
   );
-});
+}

src-web/components/Workspace.tsx

@@ -37,26 +37,22 @@ export default function Workspace() {
   return (
     <div className="grid grid-cols-[auto_1fr] grid-rows-1 h-full text-gray-900">
       <Sidebar />
-      <div
-        ref={mainContentRef}
-        data-tauri-drag-region
-        className="grid grid-rows-[auto_minmax(0,1fr)] h-full"
-      >
+      <div ref={mainContentRef} className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
         <HStack
           as={WindowDragRegion}
           justifyContent="center"
-          className="pointer-events-none px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
+          className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
           alignItems="center"
         >
           <div className="flex-1 -ml-2 pointer-events-none">
             <WorkspaceDropdown className="pointer-events-auto" />
           </div>
-          <div className="flex-[2] text-center text-gray-700 text-sm truncate">
+          <div className="flex-[2] text-center text-gray-700 text-sm truncate pointer-events-none">
             {activeRequest?.name}
           </div>
-          <div className="flex-1 flex justify-end -mr-2">
+          <div className="flex-1 flex justify-end -mr-2 pointer-events-none">
             <IconButton size="sm" title="" icon="magnifyingGlass" />
-            <RequestSettingsDropdown />
+            <RequestSettingsDropdown className="pointer-events-auto" />
           </div>
         </HStack>
         <div

src-web/components/core/Editor/Editor.css

@@ -29,7 +29,7 @@
             @apply bg-transparent;
         }
         &.cm-focused .cm-selectionBackground {
-            @apply bg-violet-500/20;
+            @apply bg-selection;
         }
 
         /* Style gutters */

tailwind.config.cjs

@@ -29,6 +29,7 @@ module.exports = {
       "5xl": "3.052rem"
     },
     colors: {
+      selection: "hsl(var(--color-violet-500) / 0.4)",
       focus: "hsl(var(--color-blue-500) / 0.6)",
       invalid: "hsl(var(--color-red-500))",
       highlight: "hsl(var(--color-gray-200) / 0.3)",