diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss
index dc5c27368..48a47cc99 100644
--- a/src/assets/styles/layout.scss
+++ b/src/assets/styles/layout.scss
@@ -120,6 +120,11 @@
       box-sizing: border-box;
       height: 36px;
       border-bottom: 1px solid var(--divider-color);
+
+      &-drag-region {
+        align-self: stretch;
+        flex: 1 1 auto;
+      }
     }
 
     .layout-content__left .the-logo {
@@ -148,6 +153,12 @@
       box-sizing: border-box;
       height: 36px;
       border-bottom: 1px solid var(--divider-color);
+
+      &-drag-region {
+        align-self: stretch;
+        flex: 1 1 auto;
+        order: 1;
+      }
     }
 
     .layout-content__left {
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 2021fcbbf..763e8dc83 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -208,7 +208,11 @@ const Layout = () => {
   const customTitlebar = useMemo(
     () =>
       !decorated ? (
-        <div className="the_titlebar" data-tauri-drag-region="true">
+        <div className="the_titlebar">
+          <div
+            className="the_titlebar-drag-region"
+            data-tauri-drag-region="true"
+          />
           <WindowControls ref={windowControlsRef} />
         </div>
       ) : null,