Skip to content

Conversation

@Hell1213
Copy link
Contributor

@Hell1213 Hell1213 commented Dec 8, 2025

Fixed UI breakage on tablet screens (iPad/Surface) where filter and action buttons were overflowing outside the container. Changed responsive breakpoints from sm: (640px) to lg: (1024px) for filter buttons, Add Task, and Sync buttons. BottomBar now shows on tablets (640px-1024px) like mobile devices, providing a clean mobile-friendly experience.

Checklist

  • Ran npx prettier --write . (for formatting)
  • Ran gofmt -w . (for Go backend)
  • Ran npm test (for JS/TS testing)
  • Added unit tests, if applicable
  • Verified all tests pass
  • Updated documentation, if needed

Additional Notes

Changes Made:

  • Updated BottomBar.tsx: Changed sm:hidden to lg:hidden to show BottomBar on tablets
  • Updated Tasks.tsx: Changed filter buttons (Projects, Status, Tags) from sm:flex

Screenshots
Screenshot from 2025-12-09 21-35-55
Screenshot from 2025-12-09 21-36-35

@github-actions
Copy link

github-actions bot commented Dec 8, 2025

Thank you for opening this PR!

Before a maintainer takes a look, it would be really helpful if you could walk through your changes using GitHub's review tools.

Please take a moment to:

  • Check the "Files changed" tab
  • Leave comments on any lines for functions, comments, etc. that are important, non-obvious, or may need attention
  • Clarify decisions you made or areas you might be unsure about and/or any future updates being considered.
  • Finally, submit all the comments!

This helps make the review process smoother and gives us a clearer understanding of your thought process.

Once you've added your self-review, we'll continue from our side. Thank you!

@Hell1213 Hell1213 force-pushed the fix/tablet-ui-breakage-issue-221 branch 2 times, most recently from 0478f39 to e2a7440 Compare December 8, 2025 16:04
Copy link
Contributor Author

@Hell1213 Hell1213 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks good to me nothing breaked and now md screens show mobile viewport

@Hell1213
Copy link
Contributor Author

Hell1213 commented Dec 8, 2025

@its-me-abhishek Ready for review! Tablet screens now use BottomBar like mobile.

icon={<Key lable="t" />}
/>
<div className="pr-2">
<div className="pr-2 hidden lg:block">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this also hides the add task button

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add task button will no more hidden

/>
</div>
<div className="hidden sm:flex flex-col items-end gap-2">
<div className="hidden lg:flex flex-col items-end gap-2">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this hides the add sync button

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved also for sync button no more hidden from now

Copy link
Collaborator

@its-me-abhishek its-me-abhishek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please fix (in reference to above comments)

@Hell1213
Copy link
Contributor Author

Hell1213 commented Dec 9, 2025

Please fix (in reference to above comments)

thanks I'm on it , will update the pr soon as requested !

…verflow

Changed responsive breakpoints from sm: to lg: for filter buttons, Add Task, and Sync buttons. BottomBar now shows on tablets (640px-1024px) like mobile devices.

Fixes CCExtractor#221
@Hell1213 Hell1213 force-pushed the fix/tablet-ui-breakage-issue-221 branch from e2a7440 to 5a01c6f Compare December 9, 2025 16:50
@Hell1213
Copy link
Contributor Author

Hell1213 commented Dec 9, 2025

@its-me-abhishek updated the pr accordingly as requested !

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.

UI breaks on mid-size screens (iPad / tablet widths) on the Tasks page

2 participants