Skip to content

Fix search controls layout on narrow screens#13

Open
Copilot wants to merge 4 commits intomainfrom
copilot/fix-bad-ui-ux-narrow-screens
Open

Fix search controls layout on narrow screens#13
Copilot wants to merge 4 commits intomainfrom
copilot/fix-bad-ui-ux-narrow-screens

Conversation

Copy link
Contributor

Copilot AI commented Jan 30, 2026

On narrow screens, search controls were cramped in a single row and overflowed on mobile devices.

Changes

Search controls (app/components/search-box.tsx)

  • Changed from flex-row to flex-col md:flex-row with flex-wrap on controls
  • Responsive text/icon sizes: text-xs md:text-sm, h-3 w-3 md:h-4 md:w-4
  • Dropdown width reduced on mobile: w-[100px] md:w-[160px]
  • Better spacing using gap utilities instead of individual margins

Header layout (app/page.tsx)

  • Kept original layout with absolute-positioned logo as requested

Screenshots

After (375px mobile):
https://github.com/user-attachments/assets/b8751f52-b7c8-45d4-bb61-04a233248f5d

After (768px tablet):
https://github.com/user-attachments/assets/c479236a-5b25-41c6-be1d-c71269103a23

After (1200px desktop):
https://github.com/user-attachments/assets/10d9f32c-b48a-4761-89f6-ef05d2a98876

Original prompt

This section details on the original issue you should resolve

<issue_title>Bad UI/UX on narrow screens</issue_title>
<issue_description></issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: yzqzss <30341059+yzqzss@users.noreply.github.com>
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Jan 30, 2026

Deploying neo-uglysearch with  Cloudflare Pages  Cloudflare Pages

Latest commit: 6d803de
Status: ✅  Deploy successful!
Preview URL: https://f5b388e5.neo-uglysearch.pages.dev
Branch Preview URL: https://copilot-fix-bad-ui-ux-narrow.neo-uglysearch.pages.dev

View logs

- Replace absolute logo positioning with flexbox layout
- Make header responsive with proper centering on all screen sizes
- Add flex-wrap to search controls for mobile
- Use responsive text and icon sizes (smaller on mobile)
- Improve spacing and touch targets for mobile users

Co-authored-by: yzqzss <30341059+yzqzss@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix bad UI/UX on narrow screens Fix layout issues on narrow screens Jan 30, 2026
Copilot AI requested a review from yzqzss January 30, 2026 00:19
@yzqzss
Copy link
Member

yzqzss commented Jan 30, 2026

@copilot 别改 app/page.tsx ,revert 掉。

Keep only search-box.tsx improvements for mobile responsiveness

Co-authored-by: yzqzss <30341059+yzqzss@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Jan 30, 2026

@copilot 别改 app/page.tsx ,revert 掉。

已恢复 app/page.tsx 到原始状态。只保留了 search-box.tsx 的移动端控制布局改进。(Commit: 6d803de)

当前状态 (375px 移动端):
mobile-reverted

Copilot AI changed the title Fix layout issues on narrow screens Fix search controls layout on narrow screens Jan 30, 2026
@yzqzss
Copy link
Member

yzqzss commented Jan 30, 2026

@OverflowCat 前端之猫下岗喵。

@yzqzss yzqzss marked this pull request as ready for review January 30, 2026 00:49
@yzqzss yzqzss requested a review from OverflowCat January 30, 2026 00:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bad UI/UX on narrow screens

2 participants