Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

🐛 Fixed tags and authors not fitting in the input field (#22052)

Browse source 
Input fields for tags and authors in the post sidebar were hard to use;
they became scrollable if you added more than one line of either.

This fix addresses that; the input field now grows in size to
accommodate for the number of tags or authors you enter.

fixes
https://linear.app/ghost/issue/DES-1087/overflow-on-boxes-in-post-settings-too-small,
https://linear.app/ghost/issue/DES-1084/tag-field-in-post-settings-menu-is-difficult-to-work-now-with-when
This commit is contained in:
Daniël van der Winden 2025-01-24 14:11:07 +01:00 • committed by GitHub
parent 8c2e62dc23
commit 9589a91684
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ghost/admin/app/styles/components/power-select.css
View file

@ -309,7 +309,8 @@
}
.ember-power-select-status-icon {
top: -4px;
position: absolute;
top: 13px;
right: 13px;
border: solid var(--midlightgrey);
border-width: 0 1px 1px 0;

32
ghost/admin/app/styles/patterns/forms.css
View file

@ -282,7 +282,8 @@ textarea {
.gh-input-x {
width: 100%;
height: 38px;
min-height: 38px;
height: auto;
padding: 4px 12px;
font-size: 1.4rem;
color: var(--black);
@ -305,7 +306,34 @@ textarea.gh-input-x {
}
.ember-power-select-multiple-trigger {
padding-left: 4px;
padding: 4px;
min-height: 38px;
display: grid;
grid-template-columns: 1fr 24px;
position: relative;
}
.ember-power-select-multiple-options {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}
.ember-power-select-trigger-multiple-input {
margin: 2px;
padding: 0;
border: 0;
background: none;
min-width: 60px;
}
.ember-basic-dropdown-trigger[aria-expanded="true"] .ember-power-select-status-icon,
.ember-power-select-status-icon {
margin: 0 auto;
transform: none;
}