Reorganising

src/app/[...file]/components/download_tty.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import * as colors from '../colors.css';
+import * as colors from '../../colors.css';
 
 export const download_tty = style({
 	display:    'block',

src/app/[...file]/components/types/text.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import * as colors from '../../colors.css'
+import * as colors from '../../../colors.css'
 
 export const group = style({
 	display:    'flex',
@@ -9,7 +9,6 @@ export const group = style({
 	lineHeight: '1.4em',
 	whiteSpace: 'pre',
 	tabSize:    4,
-	overflowX:  'scroll',
 	'@media': {
 		'screen and (min-width: 768px)': {
 			fontSize: '1.1em',

src/app/[...file]/page.css.ts

@@ -107,3 +107,7 @@ export const download_tty_group = style({
 	},
 });
 
+export const wrapper = style({
+	overflowX:     'scroll',
+	paddingBottom: '1em',
+});

src/app/[...file]/page.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from 'next';
 import Image from 'next/image';
 
-import DownloadTTY from './download_tty';
+import DownloadTTY from './components/download_tty';
-import Content from './content';
+import Content from './components/content';
 import * as style from './page.css';
 import download_image_dark from './download_dark.svg';
 import download_image_light from './download_light.svg';
@@ -68,7 +68,10 @@ export default async function Page({
 				<div className={style.download_tty_group}>
 					{download_ttys.map((text, index) => <DownloadTTY key={index} text={text} />)}
 				</div>
-				<Content src={`${root}${path}`} />
+
+				<div className={style.wrapper}>
+					<Content src={`${root}${path}`} />
+				</div>
 			</div>
 		</div>
 	);