fix(app): tighten the composer status row (#3022)

fluxer_app/src/app/globals.css

@@ -132,12 +132,9 @@ var {
 	--composer-action-gap: 0.25rem;
 	--composer-surface-color: var(--background-secondary-lighter);
 	--composer-status-line-height: 1.125rem;
+	--composer-status-row-height: 1.5rem;
 	--composer-status-safe-gap: 0.5rem;
-	--composer-status-safe-area: calc(
+	--composer-status-safe-area: calc(var(--composer-status-row-height) + var(--composer-status-safe-gap));
-		var(--composer-status-line-height) +
-		var(--composer-status-safe-gap) +
-		var(--composer-status-safe-gap)
-	);
 	--guild-list-item-box-size: 3rem;
 	--guild-list-item-gap: 0.375rem;
 	--guild-list-item-target-size: calc(var(--guild-list-item-box-size) + var(--guild-list-item-gap));
@@ -173,7 +170,7 @@ var {
 	--textarea-min-height: var(--footer-box-height);
 	--textarea-padding-y: var(--footer-box-padding-y);
 	--composer-box-inset: max(0rem, calc((var(--input-container-min-height) - var(--textarea-min-height)) / 2));
-	--messages-bottom-clearance: var(--composer-status-safe-area);
+	--messages-bottom-clearance: var(--composer-status-row-height);
 	--composer-box-inset-inline: min(
 		var(--footer-box-inset),
 		var(--chat-horizontal-padding, var(--chat-horizontal-padding-default))

fluxer_app/src/features/channel/components/textarea/InputWrapper.module.css

@@ -53,7 +53,7 @@
 	--slowmode-indicator-height: var(--composer-status-line-height, 1.125rem);
 	position: absolute;
 	inset-inline: var(--composer-box-padding-inline, 0px);
-	bottom: calc(100% + var(--composer-status-safe-gap, 0.5rem));
+	bottom: 100%;
 	z-index: 3;
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
@@ -61,7 +61,7 @@
 	gap: 0.5rem;
 	min-width: 0;
 	max-width: 100%;
-	height: var(--composer-status-line-height, 1.125rem);
+	height: var(--composer-status-row-height, 1.5rem);
 	box-sizing: border-box;
 	pointer-events: none;
 }

fluxer_app/src/features/theme/variables/ThemeVariableManifest.ts

@@ -160,6 +160,7 @@ export type ThemeVariableName =
 	| "--composer-mobile-box-height"
 	| "--composer-mobile-padding-y"
 	| "--composer-status-line-height"
+	| "--composer-status-row-height"
 	| "--composer-status-safe-area"
 	| "--composer-status-safe-gap"
 	| "--composer-surface-color"
@@ -622,6 +623,7 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
 	{name: "--composer-mobile-box-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
 	{name: "--composer-mobile-padding-y", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
 	{name: "--composer-status-line-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
+	{name: "--composer-status-row-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
 	{name: "--composer-status-safe-area", kind: "dimension", groupId: "other", groupLabel: "Other", source: "globals"},
 	{name: "--composer-status-safe-gap", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
 	{name: "--composer-surface-color", kind: "color", groupId: "surfaces", groupLabel: "Surfaces", source: "globals"},
@@ -1085,6 +1087,7 @@ export const THEME_VARIABLE_NAMES: ReadonlyArray<string> = [
 	"--composer-mobile-box-height",
 	"--composer-mobile-padding-y",
 	"--composer-status-line-height",
+	"--composer-status-row-height",
 	"--composer-status-safe-area",
 	"--composer-status-safe-gap",
 	"--composer-surface-color",
@@ -1739,7 +1742,8 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
 	"--composer-mobile-box-height": "3rem",
 	"--composer-mobile-padding-y": "max( 0rem, calc((3rem - 2rem) / 2) )",
 	"--composer-status-line-height": "1.125rem",
-	"--composer-status-safe-area": "calc( 1.125rem + 0.5rem + 0.5rem )",
+	"--composer-status-row-height": "1.5rem",
+	"--composer-status-safe-area": "calc(1.5rem + 0.5rem)",
 	"--composer-status-safe-gap": "0.5rem",
 	"--composer-surface-color": "hsl(258, calc(10% * var(--saturation-factor)), 12.44%)",
 	"--content-padding": "1rem",
@@ -1931,7 +1935,7 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
 	"--message-typing-pill-padding": "0.45rem",
 	"--message-typing-text-font-size": "0.6875rem",
 	"--message-unknown-warning-color": "#ff9933",
-	"--messages-bottom-clearance": "calc( 1.125rem + 0.5rem + 0.5rem )",
+	"--messages-bottom-clearance": "1.5rem",
 	"--mobile-bottom-nav-height": "3.75rem",
 	"--native-titlebar-height": "2rem",
 	"--outline-frame-border-width": "0.0625rem",
@@ -2202,7 +2206,8 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
 	"--composer-mobile-box-height": "3rem",
 	"--composer-mobile-padding-y": "max( 0rem, calc((3rem - 2rem) / 2) )",
 	"--composer-status-line-height": "1.125rem",
-	"--composer-status-safe-area": "calc( 1.125rem + 0.5rem + 0.5rem )",
+	"--composer-status-row-height": "1.5rem",
+	"--composer-status-safe-area": "calc(1.5rem + 0.5rem)",
 	"--composer-status-safe-gap": "0.5rem",
 	"--composer-surface-color": "hsl(220, calc(10% * var(--saturation-factor)), 94.61%)",
 	"--content-padding": "1rem",
@@ -2394,7 +2399,7 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
 	"--message-typing-pill-padding": "0.45rem",
 	"--message-typing-text-font-size": "0.6875rem",
 	"--message-unknown-warning-color": "#ff9933",
-	"--messages-bottom-clearance": "calc( 1.125rem + 0.5rem + 0.5rem )",
+	"--messages-bottom-clearance": "1.5rem",
 	"--mobile-bottom-nav-height": "3.75rem",
 	"--native-titlebar-height": "2rem",
 	"--outline-frame-border-width": "0.0625rem",