Skip to content

🐛 Bug: Input fields and extension tags overflow on small devices in bucket settings, platforms table, and messaging providers table #2629

@AbhiVarde

Description

@AbhiVarde

👟 Reproduction steps

  1. Navigate to the bucket settings page on a mobile or small tablet screen (< 768px):
    • Path: /project-[region]-[project]/storage/bucket-[bucket]/settings
  2. Scroll to the "Allowed file extension" section
  3. Observe the input field and extension tags overflowing horizontally
  4. Navigate to the platforms overview page on mobile/tablet:
    • Path: /project-[region]-[project]/overview/platforms
  5. Observe the table overflowing horizontally on smaller screens
  6. Navigate to the messaging providers page on mobile/tablet:
    • Path: /project-[region]-[project]/messaging/providers
  7. Observe the providers table overflowing horizontally on smaller screens

👍 Expected behavior

  • Input fields should respect container boundaries and resize properly on small screens
  • Extension tags should wrap to new lines instead of overflowing
  • All tables (Platforms, Messaging Providers, etc.) should be horizontally scrollable with proper column sizing
  • All elements remain responsive across all device sizes

👎 Actual Behavior

  • InputTags component overflows horizontally on small screens
  • Suggested extension tags break layout by extending beyond viewport
  • Platform table columns compress improperly, making content unreadable
  • Messaging Providers table also overflows horizontally with no scroll behavior
  • No horizontal scroll available for table on mobile devices

📸 Screenshots

Page / Section Before (Current Issue) After (Fixed - Local Build)
Storage Page - Bucket Settings Section (Mobile) Bucket Settings Mobile Before Bucket Settings Mobile After
Overview Page - Platforms Section (Mobile) Platforms Table Mobile Before Platforms Table Mobile After
Messaging Page - Providers Section (Mobile) Messaging Providers Mobile Before Messaging Providers Mobile After

Note: The "After" screenshots are from my local build.

🎲 Appwrite version

Version 1.8.x

💻 Operating system

Windows

🧱 Your Environment

  • Browser: Chrome 142.0.7444.60 (Official Build) (64-bit)
  • OS: Windows 11 Home (Version 24H2, Build 26100.6584)
  • Console Version: 1.8.0

👀 Have you spent some time to check if this issue has been raised before?

  • I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions