Mintplex-Labs/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2026-07-19 14:13:35 -04:00
Code Issues 328 Packages Projects Releases 10 Wiki Activity

[PR #5544] [MERGED] Fix Community Hub import page responsiveness on narrow widths #5474

New Issue
Closed
opened 2026-06-05 15:21:28 -04:00 by yindo · 0 comments
yindo commented 2026-06-05 15:21:28 -04:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/Mintplex-Labs/anything-llm/pull/5544
Author: @angelplusultra
Created: 4/27/2026
Status: ✅ Merged
Merged: 5/1/2026
Merged by: @timothycarambat

Base: master ← Head: 5529-bug-make-ui-more-responsive-when-gui-snaps-to-edges-vs-maximized-community-hub

📝 Commits (5)

  • e36c595 make community hub import page responsive | fix top border bug
  • 75c6a6b fix top border bug
  • dc5c7a0 fix layout shift
  • 4c945e5 remove bg to keep designs in spec
  • 406fcd0 Merge branch 'master' into 5529-bug-make-ui-more-responsive-when-gui-snaps-to-edges-vs-maximized-community-hub

📊 Changes

3 files changed (+8 additions, -8 deletions)

View changed files

📝 frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx (+1 -1)
📝 frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx (+2 -2)
📝 frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx (+5 -5)

📄 Description

Pull Request Type

  • ✨ feat (New feature)
  • 🐛 fix (Bug fix)
  • ♻️ refactor (Code refactoring without changing behavior)
  • 💄 style (UI style changes)
  • 🔨 chore (Build, CI, maintenance)
  • 📝 docs (Documentation updates)

Relevant Issues

resolves #5529

Description

The Community Hub Import Item page broke on narrow window widths (e.g. when the app is snapped to half a wide screen). Two issues:

  1. Right-side content clipped off-screen. The two-column layout used a fixed w-[360px] flex-shrink-0 steps sidebar plus a content panel that had no flex-1/min-w-0. With the page's pr-[86px] and a ml-8 between columns, the layout needed ~1450px of available width to fit. Anything narrower (snapped half of 1920px is ~960px) pushed the content panel — including the "Import another item" button — past the edge of the screen, where the parent's overflow-hidden clipped it.
  2. White strip at the top below md. The outer wrapper in Steps/index.jsx used md:mt-0 mt-6, pushing the page down 24px on small screens and exposing the page background. None of the other settings pages do this.

Fixes:

  • ImportItem/index.jsx: stack the steps panel above the content below 2xl (1536px) and run side-by-side at 2xl+. Right panel gets flex-1 min-w-0 so it shrinks rather than overflows. The wide right padding, ml-8, and h-screen are now 2xl:-only.
  • PullAndReview/index.jsx: replaced min-w-[746px] on the loading skeleton (which forced horizontal overflow) with w-full.
  • Steps/index.jsx: removed md:mt-0 mt-6 from the outer wrapper.

Visuals (if applicable)

image

Additional Information

Developer Validations

  • I ran yarn lint from the root of the repo & committed changes
  • Relevant documentation has been updated (if applicable)
  • I have tested my code functionality
  • Docker build succeeds locally

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/Mintplex-Labs/anything-llm/pull/5544 **Author:** [@angelplusultra](https://github.com/angelplusultra) **Created:** 4/27/2026 **Status:** ✅ Merged **Merged:** 5/1/2026 **Merged by:** [@timothycarambat](https://github.com/timothycarambat) **Base:** `master` ← **Head:** `5529-bug-make-ui-more-responsive-when-gui-snaps-to-edges-vs-maximized-community-hub` --- ### 📝 Commits (5) - [`e36c595`](https://github.com/Mintplex-Labs/anything-llm/commit/e36c595a3d5ad0a9ab1f8e4e25ce75023b877c0a) make community hub import page responsive | fix top border bug - [`75c6a6b`](https://github.com/Mintplex-Labs/anything-llm/commit/75c6a6be18454bc06e656e5cb17ce80985f5b258) fix top border bug - [`dc5c7a0`](https://github.com/Mintplex-Labs/anything-llm/commit/dc5c7a04608c2f32c87a309a5855e4e4bc1e4850) fix layout shift - [`4c945e5`](https://github.com/Mintplex-Labs/anything-llm/commit/4c945e5c51e4b8ab41bcea9a416904f0b1b1d483) remove bg to keep designs in spec - [`406fcd0`](https://github.com/Mintplex-Labs/anything-llm/commit/406fcd0aa04f12ed0e7581bf3cbe15dd045f7608) Merge branch 'master' into 5529-bug-make-ui-more-responsive-when-gui-snaps-to-edges-vs-maximized-community-hub ### 📊 Changes **3 files changed** (+8 additions, -8 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx` (+1 -1) 📝 `frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx` (+2 -2) 📝 `frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx` (+5 -5) </details> ### 📄 Description ### Pull Request Type - [ ] ✨ feat (New feature) - [x] 🐛 fix (Bug fix) - [ ] ♻️ refactor (Code refactoring without changing behavior) - [x] 💄 style (UI style changes) - [ ] 🔨 chore (Build, CI, maintenance) - [ ] 📝 docs (Documentation updates) ### Relevant Issues resolves #5529 ### Description The Community Hub *Import Item* page broke on narrow window widths (e.g. when the app is snapped to half a wide screen). Two issues: 1. **Right-side content clipped off-screen.** The two-column layout used a fixed `w-[360px] flex-shrink-0` steps sidebar plus a content panel that had no `flex-1`/`min-w-0`. With the page's `pr-[86px]` and a `ml-8` between columns, the layout needed ~1450px of available width to fit. Anything narrower (snapped half of 1920px is ~960px) pushed the content panel — including the "Import another item" button — past the edge of the screen, where the parent's `overflow-hidden` clipped it. 2. **White strip at the top below `md`.** The outer wrapper in `Steps/index.jsx` used `md:mt-0 mt-6`, pushing the page down 24px on small screens and exposing the page background. None of the other settings pages do this. Fixes: - `ImportItem/index.jsx`: stack the steps panel above the content below `2xl` (1536px) and run side-by-side at `2xl+`. Right panel gets `flex-1 min-w-0` so it shrinks rather than overflows. The wide right padding, ml-8, and `h-screen` are now `2xl:`-only. - `PullAndReview/index.jsx`: replaced `min-w-[746px]` on the loading skeleton (which forced horizontal overflow) with `w-full`. - `Steps/index.jsx`: removed `md:mt-0 mt-6` from the outer wrapper. ### Visuals (if applicable) <img width="1342" height="1399" alt="image" src="https://github.com/user-attachments/assets/98e19e9e-cf27-4a3b-914e-e53953cc5b41" /> ### Additional Information ### Developer Validations - [x] I ran `yarn lint` from the root of the repo & committed changes - [x] Relevant documentation has been updated (if applicable) - [x] I have tested my code functionality - [x] Docker build succeeds locally --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-06-05 15:21:28 -04:00
yindo closed this issue 2026-06-05 15:21:28 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Desktop
Docker
Integration Request
Integration Request
OS: Linux
OS: Mobile
OS: Windows
UI/UX
blocked
bug
bug
core-team-only
documentation
duplicate
embed-widget
enhancement
feature request
github_actions
good first issue
investigating
needs info / can't replicate
possible bug
pull-request
Mirrored from GitHub Pull Request
 question
stage: specifications
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Mintplex-Labs/anything-llm#5474
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?