Feature Preview - "Latest commit design updates" - layout issues #180

Closed forivall closed 4 years ago

2020-07-03T22:00:35Z

Describe the bug Layout issues - see screenshots

Expected behavior Text aligned, same vertical height as non-dark mode

Screenshots From https://github.com/benmosher/eslint-plugin-import

Feature Enabled: Light: Screen Shot 2020-07-13 at 12 54 37 PM Dark:

Feature Disabled: Light: Screen Shot 2020-07-13 at 12 57 24 PM Dark:

If this is a beta feature Please paste the html here of the element, including the parent element housing it.

.flex-justify-end {
    padding-bottom: 15px;
}

Disabling this rule seems to fix it, but i don't know why that was applied in the first place.

NOTE: beta features are prone to change, and may not be worked on depending how much work is to be done.

html of element

843055c

843055c

Failed to load latest commit information.

Disabling this rule seems to fix it, but i don't know why that was applied in the first place.

Its to do with adding spacing below the comment buttons.

It was added a while back as i felt it looked a bit off without. But i think it'll be fine to remove.

Removing the space below and reducing the spacing above those buttons could also be an option, imo.

@media (min-width: 768px) {
    .form-actions.my-md-2 {
        margin-top: 0 !important;
    }
}

Screen Shot 2020-07-14 at 12 25 41 PM

Yeah that does look better

and now that i've got this browser up to the current version of dark theme hub - it wasn't grammarly adding the space on the right, it was just this rule added in 1.25.0 https://github.com/DarkThemeHub/GithubDarkTheme/issues/182#issuecomment-658495205

.discussion-timeline-actions [type="submit"] {
  margin: 0px 8px 0px 0px !important; }

the 8px is used to put some gap between the bottom two buttons.

DarkThemeHub / GithubDarkTheme