Fix/ui-ux refinements#28
Merged
Merged
Conversation
Replace outdated tanstack.svg with correct icon in "Built on the best" section
- Enhance horizontal scrolling on mobile - Fix table header and cell alignment - Improve overflow and padding handling
- Fix leading whitespace handling - Ensure proper tab rendering in syntax highlighting
Increase copy button padding from px-2 py-1 to px-2.5 py-1.5 to meet WCAG accessibility standards. - Easier to tap on mobile devices - Better UX on all touch devices - Meets accessibility best practices
|
@KhaledSaeed18 is attempting to deploy a commit to the justinlevinedotme's projects Team on Vercel. A member of the Team first needs to authorize it. |
Owner
|
Incredible work here. Thanks! |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
UI/UX Refinements and Responsiveness Improvements
Overview
This PR addresses UI/UX issues and responsiveness problems across the homepage, builder interface, and documentation site. The changes improve user experience on all device sizes and enhance code/content presentation throughout the platform.
Changes Summary
Detailed Changes
1. Update TanStack Logo Icon on Homepage
Commit:
8390b07File Modified:
www/public/logos/tanstack.svgDescription:
Replaced the outdated TanStack logo icon in the "Built on the best" section with a correct, up-to-date icon that accurately reflects TanStack's current branding.
Before vs. After:
2. Resolve Homepage Scroll Overflow Issues
Commit:
706c49cFiles Modified:
www/app/page.tsxDescription:
Fixed unwanted horizontal scroll overflow on the homepage hero section. Added
overflow-x-clipto the hero section container to prevent content from extending beyond viewport boundaries.Before vs. After:
Impact:
3. Improve Builder Responsiveness for Recommended Badge
Commit:
52778afFiles Modified:
www/app/builder/builder.tsxDescription:
Enhanced the option card component layout to properly display the "Recommended" badge on mobile and tablet devices. The badge now wraps responsively without breaking the layout or overlapping content.
Before vs. After:
4. Improve Table Responsiveness Across Site
Commit:
282cfbeFiles Modified:
www/components/mdx-components.tsxDescription:
Added custom styled table components to handle responsiveness and improve readability of tables throughout the documentation and website. Tables now have proper overflow handling, better visual hierarchy, and improved spacing on all device sizes.
Before vs. After:
Benefits:
5. Correct Tab Indentation in MDX Code Blocks
Commit:
bd8b271Files Modified:
www/app/docs/[[...slug]]/page.tsxDescription:
Fixed tab/indentation rendering issues on the first line of MDX code blocks and code command snippets. Removed conflicting prose styling that was interfering with proper tab display and indentation preservation.
Before vs. After:
6. Migrate Middleware to Proxy (Next.js 15+)
Commit:
3d7a8f6Files Modified:
www/proxy.ts(new),www/middleware.ts(deleted)Description:
Migrated from the deprecated
middleware.tsconvention to the newproxy.tsconvention in Next.js 15+.Changes Made:
middleware.ts→proxy.tsmiddleware()→proxy()Why This Matters:
7. Improve Copy Button Touch Target Sizing
Commit:
6d8d284Files Modified:
www/components/copy-button.tsxDescription:
Increased copy button padding from
px-2 py-1topx-2.5 py-1.5to meet minimum mobile touch target accessibility standards (44x44px minimum).Why:
Impact:
Checklist