src/app/[...file]/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]/page.css.ts

@@ -107,7 +107,3 @@ 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 './components/download_tty';
-import Content from './components/content';
+import DownloadTTY from './download_tty';
+import Content from './content';
 import * as style from './page.css';
 import download_image_dark from './download_dark.svg';
 import download_image_light from './download_light.svg';
@@ -68,11 +68,8 @@ export default async function Page({
 				<div className={style.download_tty_group}>
 					{download_ttys.map((text, index) => <DownloadTTY key={index} text={text} />)}
 				</div>
-
-				<div className={style.wrapper}>
 				<Content src={`${root}${path}`} />
 			</div>
 		</div>
-		</div>
 	);
 }

src/app/[...file]/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,6 +9,7 @@ export const group = style({
 	lineHeight: '1.4em',
 	whiteSpace: 'pre',
 	tabSize:    4,
+	overflowX:  'scroll',
 	'@media': {
 		'screen and (min-width: 768px)': {
 			fontSize: '1.1em',
@@ -22,5 +23,4 @@ export const line_numbers = style({
 	paddingRight: '0.5em',
 	color:        colors.foreground2,
 	textAlign:    'right',
-	userSelect:   'none',
 });