michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Community Hub import page responsiveness on narrow widths (#5544)

Browse Source 
* 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>
This commit is contained in:
Marcello Fitton 2026-05-01 16:01:09 -07:00 committed by GitHub
parent 7d884c7863
commit 7ea6196570
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx
View File

@ -43,7 +43,7 @@ export default function PullAndReview({ settings, setSettings, setStep }) {
</h2> </h2>
{loading && ( {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"> <div className="w-full h-full flex items-center justify-center">
<p className="text-sm text-theme-text-secondary"> <p className="text-sm text-theme-text-secondary">
Pulling item details from community hub... Pulling item details from community hub...

4
frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx
View File

@ -62,11 +62,11 @@ export function CommunityHubImportItemLayout({ setStep, children }) {
}, []); }, []);
return ( 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 /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} 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)} {children(settings, setSettings, setStep)}
</div> </div>

10
frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx
View File

@ -77,7 +77,7 @@ export default function CommunityHubImportItemFlow() {
return ( return (
<CommunityHubImportItemLayout setStep={setStep}> <CommunityHubImportItemLayout setStep={setStep}>
{(settings, setSettings, 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="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"> <div className="items-center">
<p className="text-lg leading-6 font-bold text-theme-text-primary"> <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. instance with community-created prompts, skills, and commands.
</p> </p>
</div> </div>
<div className="flex-1 flex h-full"> <div className="flex-1 flex flex-col 2xl:flex-row h-full">
<div className="flex flex-col gap-y-[18px] mt-10 w-[360px] flex-shrink-0"> <div className="flex flex-col gap-y-[18px] mt-10 w-full 2xl:w-[360px] 2xl:flex-shrink-0">
<SideBarSelection setStep={setStep} currentStep={step} /> <SideBarSelection setStep={setStep} currentStep={step} />
</div> </div>
<div className="overflow-y-auto pb-[200px] h-screen no-scroll"> <div className="flex-1 min-w-0 overflow-y-auto pb-[200px] 2xl:h-screen no-scroll">
<div className="ml-8"> <div className="2xl:ml-8">
{StepPage.component({ settings, setSettings, setStep })} {StepPage.component({ settings, setSettings, setStep })}
</div> </div>
</div> </div>