Ensure only bordering areas of app are draggable (#82)

Ensures it's only possible to click and drag the bordering areas of the app. The left sidebar remains draggable, also.
Automattic · May 7, 2024 · c6a0b37 · c6a0b37
1 parent a342b0c
commit c6a0b37
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -40,7 +40,7 @@ export default function App() {
 						scrollbarGutter: 'stable',
 					} }
 					data-testid="site-content"
-					className="p-8 bg-white overflow-y-auto h-full flex-grow rounded-chrome"
+					className="py-8 pr-8 bg-white overflow-y-auto h-full flex-grow rounded-chrome"
 				>
 					<SiteContentTabs />
 				</main>

diff --git a/src/components/main-sidebar.tsx b/src/components/main-sidebar.tsx
@@ -127,7 +127,12 @@ export default function MainSidebar( { className }: MainSidebarProps ) {
 		>
 			<SidebarToolbar />
 			<div className="flex flex-col h-full">
-				<div className="flex-1 overflow-y-auto sites-scrollbar">
+				<div
+					className={ cx(
+						'flex-1 overflow-y-auto sites-scrollbar app-no-drag-region',
+						isMac() ? 'ml-5' : 'ml-4'
+					) }
+				>
 					<SiteMenu />
 				</div>
 				<div className="flex flex-col gap-4 pt-5 border-white border-t border-opacity-10 app-no-drag-region">

diff --git a/src/components/site-content-tabs.tsx b/src/components/site-content-tabs.tsx
@@ -21,7 +21,7 @@ export function SiteContentTabs() {
 	}
 
 	return (
-		<div className="flex flex-col w-full h-full app-no-drag-region">
+		<div className="flex flex-col w-full h-full pl-8 app-no-drag-region">
 			<Header />
 			<TabPanel className="mt-6 h-full flex flex-col" tabs={ tabs } orientation="horizontal">
 				{ ( { name } ) => (

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
@@ -101,7 +101,7 @@ function SiteItem( { site }: { site: SiteDetails } ) {
 		<li
 			className={ cx(
 				'flex flex-row min-w-[168px] h-8 hover:bg-[#ffffff0C] rounded transition-all',
-				isMac() ? 'mx-5' : 'mx-4',
+				isMac() ? 'mr-5' : 'mr-4',
 				isSelected && 'bg-[#ffffff19] hover:bg-[#ffffff19]'
 			) }
 		>
@@ -127,7 +127,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 				scrollbarGutter: 'stable',
 			} }
 			className={ cx(
-				'w-full overflow-y-auto overflow-x-hidden flex flex-col gap-0.5 pb-4 app-no-drag-region',
+				'w-full overflow-y-auto overflow-x-hidden flex flex-col gap-0.5 pb-4',
 				className
 			) }
 		>