Mastodon Expander Composer

mastodon-expanded-composer.css

.columns-area__panels {
	position: relative;
}

.columns-area__panels__pane.columns-area__panels__pane--compositional {
	z-index: 1; /* Ensure the left panel is above the rest */
}

.compose-panel {
    overflow-y: clip; /* We need to alter the overflow-y: hidden to allow expansion, here `clip` allows overflow-x to stay as `visible` */
}

.compose-form {
	/* These properties might change based on settings or which server you're on! */
	--bg: hsl(227 15% 12% / 75%);
	--padding-x: 15px;

	width: calc(100% - 2 * var(--padding-x, 0px)); /* Calculate its initial width */
	transition: all 200ms ease-in-out;
}

body:has(.emoji-picker-dropdown__menu) .compose-form,
.compose-form:focus-within {
	position: sticky;
	left: 0;
	top: 0;

	width: 200%;

	background-color: var(--bg);
	box-shadow: 0 0 0 1rem var(--bg);
}