Skip to content

Fix tab headers on small display ratio - #38653

Merged
AlexAndBear merged 4 commits into
masterfrom
fix-tab-headers-on-small-display-ratio
Apr 27, 2021
Merged

Fix tab headers on small display ratio#38653
AlexAndBear merged 4 commits into
masterfrom
fix-tab-headers-on-small-display-ratio

Conversation

@AlexAndBear

@AlexAndBear AlexAndBear commented Apr 26, 2021

Copy link
Copy Markdown

Description

Fixing tabheader misalign issue on small display ratio, also adjust selected style which is matching better now to other elements (for example left sidebar)
Issue reported by @ChrisEdS

Tested on:

  • Firefox
  • Google Chrome
  • IE11
  • Edge
  • Safari
  • Android Chrome Mobile

Screenshots (if appropriate):

Before:
image

After:
image
(Normal view mode)
image
(Shrinked view mode)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Database schema changes (next release will require increase of minor version instead of patch)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Technical debt
  • Tests only (no source changes)

Checklist:

  • Code changes
  • Unit tests added
  • Acceptance tests added
  • Documentation ticket raised:
  • Changelog item, see TEMPLATE
@AlexAndBear
AlexAndBear force-pushed the fix-tab-headers-on-small-display-ratio branch from c3b5659 to 5c04546 Compare April 26, 2021 08:50
@micbar

micbar commented Apr 26, 2021

Copy link
Copy Markdown
Contributor

please add changelog

@owncloud owncloud deleted a comment from update-docs Bot Apr 26, 2021
@AlexAndBear

Copy link
Copy Markdown
Author

@micbar done

@JammingBen JammingBen 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.

LGTM 👍

@AlexAndBear
AlexAndBear marked this pull request as ready for review April 26, 2021 08:52

@hurradieweltgehtunter hurradieweltgehtunter 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.

Hovering state of the tabs is wider than the un-hovered state which results in a little sideways glitch when hovering over the tabs.
font:weight: bold; makes the tab wider.
-> remove font-weight: bold;
or add font-weight: bold to unhovered state, too

@AlexAndBear
AlexAndBear force-pushed the fix-tab-headers-on-small-display-ratio branch from 5c04546 to 7653693 Compare April 27, 2021 07:21
@AlexAndBear

AlexAndBear commented Apr 27, 2021

Copy link
Copy Markdown
Author

@micbar @hurradieweltgehtunter @ChrisEdS since we refactored the whole tab headers look and feel, I request a new review

@ChrisEdS ChrisEdS 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.

Tested on Chrome. Looks good to me!

@sonarqubecloud

Copy link
Copy Markdown

Kudos, SonarCloud Quality Gate passed!

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 1 Code Smell

No Coverage information No Coverage information
No Duplication information No Duplication information

@AlexAndBear
AlexAndBear merged commit c5456d2 into master Apr 27, 2021
@delete-merged-branch
delete-merged-branch Bot deleted the fix-tab-headers-on-small-display-ratio branch April 27, 2021 12:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

5 participants