Edit NFTs and collection mobile responsiveness to match Figma design

[Jayrodri088]

📱 Mobile Layout Optimization for NFT Trending & Collections Pages

Overview

Redesigned the NFT trending and collections pages layout to provide an optimized mobile experience with improved usability and visual hierarchy, matching the figma design.

✨ Key Changes

🎯 Tab Navigation (Trending Page)

• Left-aligned positioning: Moved trending/top tabs to start position on mobile
• Background styling: Active tabs now have dark background (#1C1D1F) with white text, inactive tabs remain transparent with gray text
• Rounded design: Added rounded-lg styling for modern appearance

🔍 Search & Controls Layout (Trending Page)

• Restructured layout: Search bar and control buttons now positioned on same row below tabs
• Responsive search: Search bar takes flexible width on mobile while leaving space for icon buttons
• Icon button implementation:
  • Replaced dropdown selects with custom icon buttons on mobile using Next.js Image component
  • Added invert class for proper icon visibility against dark backgrounds
  • Maintained dropdown functionality with custom overlay menus
• Desktop preservation: Original dropdown selects remain unchanged on desktop screens

🖼️ NFT Card Grid & Display (Trending Page)

• Mobile grid optimization: Changed from 1-column to 2-column layout on mobile (grid-cols-2)
• Responsive spacing: Reduced gap spacing on mobile (gap-3) while maintaining larger gaps on desktop
• Simplified mobile cards:
  • Hidden secondary information (likes count, minted count, time left) on mobile
  • Streamlined display shows only: creator info, image, title, current bid
  • Maintained inline layout for "Current Bid" label and ETH amount
• Performance improvements: Optimized image sizes and responsive breakpoints

🗂️ Collections Filter Interface (Collections Page)

• Mobile-first filter layout: Redesigned filter component with mobile-specific responsive behavior
• Tab + Filter Icon Layout:
  • Hot/Top/Down tabs positioned on left with filter icon on right
  • Used Next.js Image component for filter icon from public folder
• Vertical Filter Stack:
  • Search bar with "Search by NFTs" placeholder
  • Collection title display
  • Time period filters (1h, 6h, 24h, 3d, 7d) in full-width button row
  • Blockchain dropdown and "View all" button in equal-width layout
• Enhanced Button Styling:
  • Time filters with active state styling (bg-black for selected)
  • Matching dark backgrounds for blockchain and view all buttons
  • Proper spacing and padding for touch interaction

📊 Collections Table Mobile Optimization (Collections Page)

• Simplified table columns: On mobile, only showing essential columns:
  • Rank number (#)
  • Collection (name + image + blockchain icon)
  • Floor Price
• Hidden columns on mobile: Collection ID, Volume, Sales, Top Offer, Holders
• Responsive table display: Used hidden md:table-cell for progressive enhancement
• Enhanced "See more" button: Added forward arrow icon on mobile only

🎨 Typography & Spacing

• Header optimization: Improved spacing between titles and item counts
• Responsive text sizing: Applied appropriate text sizes across different screen sizes
• Content truncation: Added text truncation to prevent overflow on smaller screens

🔧 Technical Implementation

• Utilized Tailwind CSS responsive classes (sm:, md:, lg:)
• Implemented Next.js Image component for optimized asset loading
• Added proper state management for mobile dropdown interactions
• Maintained accessibility with proper alt text and semantic HTML
• Responsive design patterns with mobile-first approach

📱 Mobile Experience Improvements

• Trending Page: Clean, focused 2-column card layout with intuitive icon-based controls
• Collections Page: Streamlined table view with essential information only
• Filter Interface: Touch-friendly controls with proper spacing
• Navigation: Improved touch targets and spacing for mobile interaction
• Reduced cognitive load: Simplified information display on smaller screens

🖥️ Desktop Compatibility

• All existing desktop functionality preserved
• No breaking changes to current desktop user experience
• Responsive design ensures smooth transitions between breakpoints
• Original layouts maintained for larger screens

🧪 Testing

• Trending Page: Mobile layout displays 2 NFT cards per row, tab navigation and search work correctly
• Collections Page: Mobile table shows only essential columns, filter interface functions properly
• Cross-device: Icon dropdown menus work properly on mobile, desktop layout unchanged
• Responsive: All breakpoints transition smoothly between layouts
• Functionality: Search, filtering, and pagination work across all screen sizes

Collections Page

Trending Page

Closes: #121

[netlify]

✅ Deploy Preview for starkbid-stable ready!

Name	Link
🔨 Latest commit	c286c12
🔍 Latest deploy log	https://app.netlify.com/projects/starkbid-stable/deploys/688fdc8f77a5d00008294a44
😎 Deploy Preview	https://deploy-preview-139--starkbid-stable.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for starkbid ready!

Name	Link
🔨 Latest commit	c286c12
🔍 Latest deploy log	https://app.netlify.com/projects/starkbid/deploys/688fdc8f7aa547000827f4b4
😎 Deploy Preview	https://deploy-preview-139--starkbid.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[DioChuks]

For collections page

pls fix

• the blockchain dropdown seems to be shorter than expected, when triggered, causing only half the UI to show limiting the rest of the other options.

---

pls fix:

• table only stops at second column, it should be scrollable to the end.

[DioChuks]

i dont think this is part of the collections table

[DioChuks]

Great work 👍