refactor(web): extract split layout for variable inspect

- add SplitPanel to share left/right shell and narrow menu handling
- reuse InspectHeaderProps for tab header + actions across tabs
- refactor variables/artifacts tabs to plug into shared split layout
- align right-side header/close behavior and consolidate empty/loading flows

web/app/components/workflow/variable-inspect/inspect-layout.tsx

@@ -4,11 +4,14 @@ import { RiCloseLine } from '@remixicon/react'
 import ActionButton from '@/app/components/base/action-button'
 import TabHeader from './tab-header'
 
-type InspectLayoutProps = {
+export type InspectHeaderProps = {
   activeTab: InspectTab
   onTabChange: (tab: InspectTab) => void
   onClose: () => void
   headerActions?: ReactNode
+}
+
+type InspectLayoutProps = InspectHeaderProps & {
   children: ReactNode
 }
 
@@ -31,7 +34,7 @@ const InspectLayout: FC<InspectLayoutProps> = ({
           </ActionButton>
         </div>
       </div>
-      <div className="min-h-0 flex-1">
+      <div className="flex min-h-0 flex-1 flex-col">
         {children}
       </div>
     </div>