feat: enhance layout responsiveness in DemoBuilder, MainContent, and StepEditor components #release

Author: estruyf

apps/webviews/src/components/demo/DemoBuilder.tsx

@@ -328,7 +328,7 @@ export const DemoBuilder: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="h-screen flex flex-col bg-gray-50 dark:bg-gray-900">
       <AppHeader
         title="Config Editor"
         subtitle="Manage your demo configuration"
@@ -357,7 +357,7 @@ export const DemoBuilder: React.FC = () => {
         }}
       />
 
-      <div className="max-w-7xl mx-auto px-6 py-8">
+      <div className="flex-1 max-w-7xl mx-auto px-6 py-8 w-full overflow-hidden">
         {showValidation && (
           <div className="mb-8">
             <ValidationSummary
@@ -369,8 +369,8 @@ export const DemoBuilder: React.FC = () => {
           </div>
         )}
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          <Sidebar className="lg:sticky lg:top-24 lg:self-start lg:max-h-[calc(100vh-205px)] lg:overflow-y-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 h-full min-h-0">
+          <Sidebar className="lg:sticky lg:top-0 lg:self-start h-full lg:overflow-y-auto">
             <Card className='space-y-6'>
               <div className="flex items-center">
                 <button

apps/webviews/src/components/layout/MainContent.tsx

@@ -9,7 +9,7 @@ export const MainContent = React.forwardRef<HTMLDivElement, MainContentProps>(({
   return (
     <div
       ref={ref}
-      className={`h-full lg:col-span-2 lg:sticky lg:top-24 lg:self-start lg:max-h-[calc(100vh-205px)] lg:overflow-y-auto custom-scrollbar ${className}`}
+      className={`h-full lg:col-span-2 lg:overflow-y-auto custom-scrollbar ${className}`}
       style={{ scrollBehavior: 'smooth' }}
     >
       <div className="space-y-6 min-h-full">

apps/webviews/src/components/step/StepEditor.tsx

@@ -857,8 +857,8 @@ export const StepEditor: React.FC<StepEditorProps> = ({ step, onChange }) => {
   };
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
+    <div className="space-y-4 h-full">
+      <div className="flex items-center justify-between sticky top-0 bg-white dark:bg-gray-800 z-10 pb-2">
         <h4 className="text-lg font-semibold text-gray-900 dark:text-white">Step Configuration</h4>
         <div className="flex items-center gap-2">
           <span className="text-sm text-gray-700 dark:text-gray-300">{step.disabled ? 'Disabled' : 'Enabled'}</span>