height hot fix

lifeparticle · Sep 7, 2023 · 5a8e03c · 5a8e03c
1 parent 5498d53
commit 5a8e03c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
@@ -1,10 +1,16 @@
 .toc {
-	height: calc(100dvh - 70px);
 	overflow: hidden;
 
+	&__output,
+	&__input {
+		height: calc(100dvh - 75px);
+	}
+
 	&__output {
-		display: grid;
-		gap: var(--bt-size-30);
-		margin-top: var(--bt-size-24);
+		&_form {
+			display: grid;
+			gap: var(--bt-size-30);
+			margin-top: var(--bt-size-24);
+		}
 	}
 }
diff --git a/ui/src/pages/Markdown/TableOfContent/index.tsx b/ui/src/pages/Markdown/TableOfContent/index.tsx
@@ -95,7 +95,7 @@ const TableOfContent: React.FC = () => {
 
 	return (
 		<PageGrid className={style.toc}>
-			<Card>
+			<Card className={style.toc__input}>
 				<Form layout="vertical">
 					<CopyInput>
 						<ResponsiveInputWithLabel
@@ -115,26 +115,35 @@ const TableOfContent: React.FC = () => {
 					</CopyInput>
 					<Form.Item label="Content">
 						<TextArea
+							style={{
+								height: "calc(100dvh - 250px)",
+							}}
 							placeholder=""
 							value={markdown}
 							onChange={(event) =>
 								onMarkdownChange(event.currentTarget.value)
 							}
-							rows={10}
+							autoSize={false}
 						/>
 					</Form.Item>
 				</Form>
 			</Card>
 
-			<Card>
-				<Form layout="vertical" className={style.toc__output}>
+			<Card className={style.toc__output}>
+				<Form layout="vertical" className={style.toc__output_form}>
 					<Clipboard
 						text={tableOfContents}
 						clipboardComponent={ClipboardButton}
 					/>
 
 					<Form.Item label="Output">
-						<TextArea value={tableOfContents} rows={10} />
+						<TextArea
+							value={tableOfContents}
+							style={{
+								height: "calc(100dvh - 250px)",
+							}}
+							autoSize={false}
+						/>
 					</Form.Item>
 				</Form>
 			</Card>