fix(app): rework composer layout and footer alignment (#1591)

fluxer_app/src/features/channel/components/barriers/BarrierComponents.module.css

@@ -3,11 +3,11 @@
 .barrierLayout {
 	display: grid;
 	grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
-	align-items: flex-start;
+	align-items: start;
 	position: relative;
 	min-height: var(--textarea-min-height);
 	box-sizing: border-box;
-	padding: var(--user-area-padding-y) 0;
+	padding: var(--textarea-padding-y) 0;
 	column-gap: var(--textarea-upload-gap);
 	min-width: 0;
 	width: 100%;
@@ -51,12 +51,18 @@
 
 .actionArea > button {
 	margin: 0;
+	height: var(--textarea-button-height);
+	min-height: var(--textarea-button-height);
 }
 
 .timer {
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
+	height: var(--textarea-button-height);
 	border-radius: 0.375rem;
 	background-color: var(--background-secondary-alt);
-	padding: 0.375rem 0.75rem;
+	padding: 0 0.75rem;
 	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 	font-size: 0.875rem;
 	line-height: 1.25rem;

fluxer_app/src/features/channel/components/barriers/BarrierComponents.tsx

@@ -55,9 +55,8 @@ const BarrierBase = observer(({message, action, icon}: BarrierBaseProps) => {
 				wrapperStyles.box,
 				wrapperStyles.wrapperSides,
 				textareaStyles.textareaOuter,
-				textareaStyles.textareaOuterMinHeight,
+				textareaStyles.textareaOuterRow,
 				wrapperStyles.roundedAll,
-				wrapperStyles.bottomSpacing,
 			)}
 			data-flx="channel.barriers.barrier-components.barrier-base.div"
 		>