Skip to content

[UI/UX:Forum] Responsive Category Labels#11379

Merged
bmcutler merged 6 commits into
mainfrom
forum-category-render-fix
Feb 3, 2025
Merged

[UI/UX:Forum] Responsive Category Labels#11379
bmcutler merged 6 commits into
mainfrom
forum-category-render-fix

Conversation

@jeffrey-cordero

Copy link
Copy Markdown
Contributor

Please check if the PR fulfills these requirements:

  • Tests for the changes have been added/updated (if possible)
  • Documentation has been updated/added if relevant
  • Screenshots are attached to Github PR if visual/UI changes were made

What is the current behavior?

Category labels for the discussion forum thread list that are too long in terms of text for small viewports end up wrapping onto the next line, where the expected behavior is for each box to correspond to one category, which is displayed via the category, long label to display, below.

image

What is the new behavior?

Longer labels remain in a single box, where if the container is too long for a small viewport, the user may scroll horizontally to view the thread content.

image

Other information?

Fixes #10874

@codecov

codecov Bot commented Jan 29, 2025

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 22.12%. Comparing base (4e9f55a) to head (31f3f28).
Report is 8 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##               main   #11379   +/-   ##
=========================================
  Coverage     22.12%   22.12%           
  Complexity     8807     8807           
=========================================
  Files           246      246           
  Lines         31758    31758           
  Branches         79       79           
=========================================
  Hits           7027     7027           
  Misses        24655    24655           
  Partials         76       76           
Flag Coverage Δ
autograder 21.56% <ø> (ø)
js 26.85% <ø> (ø)
migrator 100.00% <ø> (ø)
php 19.13% <ø> (ø)
python_submitty_utils 80.08% <ø> (ø)
submitty_daemon_jobs 90.94% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

@max1dyer
max1dyer self-requested a review January 29, 2025 22:19

@max1dyer max1dyer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The visual changes look good and make the necessary changes. When minimizing the screen the comments do not wrap and the title of thread box is always visible.
Before:
image

After:
image

My only comment is I'm not sure changing the padding to 6px vs 5px is necessary. Visually it doesn't really improve anything I can see. Is there a reason for this specific change?

@jeffrey-cordero

Copy link
Copy Markdown
Contributor Author

The visual changes look good and make the necessary changes. When minimizing the screen the comments do not wrap and the title of thread box is always visible. Before: image

After: image

My only comment is I'm not sure changing the padding to 6px vs 5px is necessary. Visually it doesn't really improve anything I can see. Is there a reason for this specific change?

I was testing the padding locally, and I forgot to remove it remotely for this PR. I also don't see much differences in the increase in padding, so I reverted the changes.

@max1dyer max1dyer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Visual changes look good and function the same with code changes you made since last review.

@williamjallen williamjallen left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Code looks good to me. Fixing the date overflow as shown in @max1dyer's screenshot would be a good next improvement. If you don't have the capacity or interest to do it, it would probably be a good first or second issue for one of our new developers.

@polibear21 polibear21 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The changes look good, and the behavior works like shown. I agree that the date wrapping function could be changed to be displayed under the category labels if the horizontal size gets smaller.

@bmcutler
bmcutler merged commit d4cfece into main Feb 3, 2025
@bmcutler
bmcutler deleted the forum-category-render-fix branch February 3, 2025 05:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

Long labels for posts on small width devices get cut weirdly

5 participants