Refined hover area for closed sidebar in Admin (#22004)

ref
https://linear.app/ghost/issue/DES-797/admin-visual-design-improvements

- When the sidebar is closed in Admin, the hover area to re-open it is
too narrow. This PR updates the width of this area so it's easier to
target.

apps/admin-x-settings/src/MainContent.tsx

@@ -11,7 +11,7 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 const Page: React.FC<{children: ReactNode}> = ({children}) => {
     return <>
-        <div className='fixed right-0 top-2 z-50 flex justify-end p-8 dark:bg-grey-975 tablet:fixed tablet:top-0 tablet:bg-transparent tablet:px-8 dark:tablet:bg-transparent' id="done-button-container">
+        <div className='fixed right-0 top-2 z-50 flex justify-end bg-transparent p-8 tablet:fixed tablet:top-0 tablet:px-8' id="done-button-container">
             <ExitSettingsButton />
         </div>
         <div className="w-full dark:bg-grey-975 tablet:fixed tablet:left-0 tablet:top-0 tablet:flex tablet:h-full" id="admin-x-settings-content">
@@ -77,7 +77,7 @@ const MainContent: React.FC = () => {
                     <Sidebar />
                 </div>
             </div>
-            <div className="relative h-full flex-1 overflow-y-scroll bg-white pt-12 dark:bg-black tablet:basis-[800px]" id="admin-x-settings-scroller">
+            <div className="relative h-full flex-1 overflow-y-scroll bg-white pt-12 dark:bg-grey-975 tablet:basis-[800px] dark:tablet:bg-black" id="admin-x-settings-scroller">
                 <Settings />
             </div>
         </Page>

ghost/admin/app/styles/layouts/main.css

@@ -137,6 +137,11 @@ body:not(.gh-body-fullscreen) .gh-viewport {
     opacity: 0;
 }
 
+.gh-nav-hidden .gh-toggle-nav-menu {
+    width: 60px;
+    right: -60px;
+}
+
 .gh-nav:hover .gh-toggle-nav-menu,
 .gh-nav-hidden .gh-toggle-nav-menu {
     opacity: 1;
@@ -1190,10 +1195,9 @@ body:not(.gh-body-fullscreen) .gh-viewport {
     padding: 0 var(--main-layout-content-sidepadding) var(--main-layout-content-sidepadding);
     margin: 0 auto;
     max-width: var(--main-layout-content-maxwidth);
-    transition: padding ease-in-out 250ms;
 }
 
-.gh-nav.close + .gh-main .gh-canvas {
+.gh-nav-hidden + .gh-main .gh-canvas {
     padding-left: 80px;
     padding-right: 80px;
 }