my-app/src/pages/BookingSettings.module.css

@@ -118,6 +118,7 @@
 	color: #374151;
 	cursor: pointer;
 	transition: all 0.2s;
+	width: fit-content;
 }
 
 .clearButton:hover {
@@ -235,11 +236,13 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	justify-content: center;;
 	gap: 1rem;
 	padding: 2rem;
 	background: #f9fafb;
 	border-radius: 12px;
 	border: 1px solid #e5e7eb;
+	width: 100%;
 }
 
 .resetButton {
@@ -252,6 +255,7 @@
 	font-weight: 600;
 	cursor: pointer;
 	transition: background-color 0.2s;
+	width: fit-content;
 }
 
 .resetButton:hover {
@@ -268,7 +272,7 @@
 	font-weight: 600;
 	cursor: pointer;
 	transition: background-color 0.2s;
-	margin-left: 1rem;
+	width: fit-content;
 }
 
 .testSessionButton:hover {

my-app/src/pages/TestSession.jsx

@@ -42,8 +42,8 @@ export function TestSession() {
 		<div className={styles.container}>
 			<div className={styles.content}>
 				<div className={styles.header}>
-					<h1>Test Session</h1>
-					<p>Enter your name to begin:</p>
+					<h1>Testsession</h1>
+					<p>Välommen! Ange ditt namn för att börja:</p>
 				</div>
 
 				<div className={styles.nameSection}>
@@ -51,25 +51,10 @@ export function TestSession() {
 						type="text"
 						value={userName}
 						onChange={handleCustomNameChange}
-						placeholder="Your name"
+						placeholder="För- och efternamn"
 						className={styles.nameInput}
 					/>
-
-					<p>Or choose one:</p>
-
-					<div className={styles.normalNames}>
-						{NORMAL_NAMES.map((name, index) => (
-							<button
-								key={index}
-								onClick={() => handleNormalNameSelect(name)}
-								className={`${styles.normalNameButton} ${userName === name ? styles.selected : ''}`}
-							>
-								{name}
-							</button>
-						))}
-					</div>
 				</div>
-
 				{canStart && (
 					<button 
 						onClick={handleStart}

my-app/src/pages/TestSession.module.css

@@ -1,5 +1,5 @@
 .container {
-	min-height: 100vh;
+	height: 100vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -9,6 +9,9 @@
 .content {
 	max-width: 500px;
 	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	text-align: center;
 }
 
@@ -27,6 +30,7 @@
 
 .nameSection {
 	margin: 2rem 0;
+	width: 100%;
 }
 
 .nameInput {
@@ -37,6 +41,7 @@
 	border-radius: 6px;
 	outline: none;
 	margin-bottom: 1.5rem;
+
 }
 
 .nameInput:focus {
@@ -80,6 +85,7 @@
 	font-size: 1rem;
 	cursor: pointer;
 	margin-top: 1.5rem;
+	width: 100%;
 }
 
 .startButton:hover {