Skip to content

Instantly share code, notes, and snippets.

@ZoeBijl
Last active October 10, 2024 19:57
Show Gist options
  • Save ZoeBijl/644f6d7ccb47850982688eba88285fd8 to your computer and use it in GitHub Desktop.
Save ZoeBijl/644f6d7ccb47850982688eba88285fd8 to your computer and use it in GitHub Desktop.
mastodon-3.4.0-fix-the-textarea.css
/* Compose form
* Why are the buttons inside? Why?
*/
.compose-form__highlightable {
border: 0;
background: 0;
}
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
border: 1px solid var(--background-border-color);
border-radius: 4px;
}
.compose-form__footer {
display: grid;
grid-template-areas:
"buttons buttons"
"dropdowns submit";
padding: 0;
}
.compose-form__buttons {
grid-area: buttons;
}
.compose-form__dropdowns {
grid-area: dropdowns;
}
.compose-form__submit {
grid-area: submit;
}
.compose-form__actions {
display: contents;
}
.compose-form__uploads {
padding: 0;
}
.compose-form .spoiler-input__input {
border-radius: 4px 4px 0 0;
}
.compose-form .spoiler-input + .autosuggest-textarea .autosuggest-textarea__textarea {
border-radius: 0 0 4px 4px;
border-top: 0;
}
.compose-form .spoiler-input .autosuggest-input {
border-bottom: 0;
}
.compose-form__poll .poll__option {
padding: 0;
}
.emoji-picker-dropdown__menu {
margin-left: 5px;
}
/* Hides the “post privacy” label */
.compose-form__footer [title$="privacy"] span {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
@ZoeBijl
Copy link
Author

ZoeBijl commented Oct 9, 2024

Preview:
shows an untangled textarea, the buttons are no longer visually inside the textarea

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment