Skip to content

improve mobile responsiveness & add table legend - #6

Merged
davidohnee merged 1 commit into
mainfrom
mobile-responsiveness
Apr 24, 2025
Merged

davidohnee merged 1 commit into
mainfrom
mobile-responsiveness

Conversation

@davidohnee

Copy link
Copy Markdown
Owner

No description provided.

Copilot AI review requested due to automatic review settings April 24, 2025 12:58

Copilot AI 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.

Pull Request Overview

This PR enhances mobile responsiveness across several views and introduces a table legend for clarity in the team table display.

  • Adjusts width calculations and adds overflow settings in ViewerView.vue and Tournament/SingleView.vue.
  • Adds ellipsis styling in TeamTableEntry.vue.
  • Introduces a table legend and responsive grid adjustments in TeamTable.vue, with additional mobile-specific header styling in App.vue.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/views/ViewerView.vue Adjusted width and overflow for mobile responsiveness.
src/views/Tournament/SingleView.vue Adjusted width and overflow for mobile responsiveness.
src/components/TeamTableEntry.vue Added ellipsis styling for team names; suggestion to improve CSS for text truncation.
src/components/TeamTable.vue Introduced a table legend; ensured grid layout adapts on small screens.
src/App.vue Updated header style for mobile devices.


.name {
text-overflow: ellipsis;
overflow: hidden;

Copilot AI Apr 24, 2025

Copy link

Choose a reason for hiding this comment

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

For text-overflow: ellipsis to work properly, consider adding 'white-space: nowrap' to the '.name' style to prevent wrapping.

Suggested change
overflow: hidden;
overflow: hidden;
white-space: nowrap;

Copilot uses AI. Check for mistakes.
:tournament="tournament"
:teamMatchesRouteName="teamMatchesRouteName"
/>
<legend>

Copilot AI Apr 24, 2025

Copy link

Choose a reason for hiding this comment

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

The element is intended for use within a

for grouping form elements. Consider replacing with a more semantically appropriate element like a
.

Suggested change
<legend>
<div class="legend-container">

Copilot uses AI. Check for mistakes.
@davidohnee
davidohnee merged commit 3b74530 into main Apr 24, 2025
@davidohnee
davidohnee deleted the mobile-responsiveness branch April 24, 2025 13:00
@davidohnee davidohnee self-assigned this Jul 5, 2026
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.

2 participants