From 7ea61965705b822339092751869b518ad0cf2d62 Mon Sep 17 00:00:00 2001
From: Marcello Fitton <106866560+angelplusultra@users.noreply.github.com>
Date: Fri, 1 May 2026 16:01:09 -0700
Subject: [PATCH] Fix Community Hub import page responsiveness on narrow widths
 (#5544)

* make community hub import page responsive | fix top border bug

* fix top border bug

* fix layout shift

* remove bg to keep designs in spec

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
---
 .../ImportItem/Steps/PullAndReview/index.jsx           |  2 +-
 .../CommunityHub/ImportItem/Steps/index.jsx            |  4 ++--
 .../GeneralSettings/CommunityHub/ImportItem/index.jsx  | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx
index 040df743..bedb91cb 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx
@@ -43,7 +43,7 @@ export default function PullAndReview({ settings, setSettings, setStep }) {
           </h2>
 
           {loading && (
-            <div className="flex h-[200px] min-w-[746px] rounded-lg animate-pulse">
+            <div className="flex h-[200px] w-full rounded-lg animate-pulse">
               <div className="w-full h-full flex items-center justify-center">
                 <p className="text-sm text-theme-text-secondary">
                   Pulling item details from community hub...
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx
index 97b33f7f..8440c09b 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx
@@ -62,11 +62,11 @@ export function CommunityHubImportItemLayout({ setStep, children }) {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex md:mt-0 mt-6">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] w-full h-full flex"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         {children(settings, setSettings, setStep)}
       </div>
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx
index b79afbf6..c134abfb 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx
@@ -77,7 +77,7 @@ export default function CommunityHubImportItemFlow() {
   return (
     <CommunityHubImportItemLayout setStep={setStep}>
       {(settings, setSettings, setStep) => (
-        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
+        <div className="flex flex-col w-full px-1 md:px-6 2xl:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
             <div className="items-center">
               <p className="text-lg leading-6 font-bold text-theme-text-primary">
@@ -89,12 +89,12 @@ export default function CommunityHubImportItemFlow() {
               instance with community-created prompts, skills, and commands.
             </p>
           </div>
-          <div className="flex-1 flex h-full">
-            <div className="flex flex-col gap-y-[18px] mt-10 w-[360px] flex-shrink-0">
+          <div className="flex-1 flex flex-col 2xl:flex-row h-full">
+            <div className="flex flex-col gap-y-[18px] mt-10 w-full 2xl:w-[360px] 2xl:flex-shrink-0">
               <SideBarSelection setStep={setStep} currentStep={step} />
             </div>
-            <div className="overflow-y-auto pb-[200px] h-screen no-scroll">
-              <div className="ml-8">
+            <div className="flex-1 min-w-0 overflow-y-auto pb-[200px] 2xl:h-screen no-scroll">
+              <div className="2xl:ml-8">
                 {StepPage.component({ settings, setSettings, setStep })}
               </div>
             </div>