declutter the ui a bit

static/css/chat.css

@@ -65,6 +65,7 @@ body {
 body {
 	display: flex;
 	overflow: hidden;
+	padding: 0 10px;
 }
 
 body.resizing * {
@@ -192,7 +193,7 @@ body:not(.loading) #loading {
 	gap: 5px;
 	background: #1e2030;
 	margin: auto;
-	margin-top: 40px;
+	margin-top: 42px;
 	width: 100%;
 	max-width: 1200px;
 	height: calc(100% - 40px);
@@ -220,10 +221,14 @@ body:not(.loading) #loading {
 	font-style: italic;
 	padding-left: 22px;
 	transition: 150ms opacity;
+	max-width: 100%;
 }
 
 #title-text {
 	transition: 150ms;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 #title #title-refresh {
@@ -288,7 +293,7 @@ body:not(.loading) #loading {
 
 .message {
 	position: relative;
-	max-width: 700px;
+	max-width: min(700px, 100%);
 	min-width: 280px;
 	width: max-content;
 	padding-top: 28px;
@@ -371,20 +376,23 @@ body:not(.loading) #loading {
 	background-image: url(icons/search-tool.svg);
 }
 
+#role::before,
 .message.user .role::before {
 	background-image: url(icons/user.svg);
 }
 
+#role:has(.dropdown[data-value="system"])::before,
 .message.system .role::before {
 	background-image: url(icons/system.svg);
 }
 
+#role:has(.dropdown[data-value="assistant"])::before,
 .message.assistant .role::before {
 	background-image: url(icons/assistant.svg);
 }
 
 .message.assistant {
-	max-width: 800px;
+	max-width: min(800px, 100%);
 }
 
 .message.loading .text::after {
@@ -734,11 +742,12 @@ body:not(.loading) #loading {
 	left: 8px;
 	display: flex;
 	align-items: center;
-	gap: 20px;
+	gap: 2px 20px;
 	white-space: nowrap;
 	font-size: 13px;
 	line-height: 13px;
 	pointer-events: none;
+	flex-wrap: wrap;
 }
 
 .statistics .provider,
@@ -811,6 +820,7 @@ body:not(.loading) #loading {
 	height: 320px;
 	padding-bottom: 36px;
 	flex-shrink: 0;
+	flex-direction: column;
 }
 
 #chat::after {
@@ -937,12 +947,45 @@ body:not(.loading) #loading {
 	opacity: 1;
 }
 
+#header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 4px 6px;
+	background: #363a4f;
+	width: 100%;
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
+	font-size: 12px;
+	line-height: 12px;
+}
+
+#role {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+#role .dropdown {
+	font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
+	background: transparent;
+	padding: 0;
+	height: 14px;
+}
+
+#role .dropdown .selected {
+	text-transform: lowercase;
+}
+
+#role .dropdown .selected::after {
+	display: none;
+}
+
 #message {
-	border-bottom-left-radius: 0px;
+	border-radius: 0;
-	border-bottom-right-radius: 0px;
 	width: 100%;
 	height: 100%;
-	padding: 14px 16px;
+	padding: 12px 14px;
 	padding-bottom: 8px;
 }
 
@@ -990,6 +1033,7 @@ select {
 	align-items: center;
 	gap: 12px;
 	z-index: 10;
+	max-width: calc(100% - 140px);
 }
 
 #chat .option {
@@ -1042,6 +1086,7 @@ body.loading #version,
 .message .statistics .tokens::before,
 .message .statistics .cost::before,
 .message .scroll-view,
+#role::before,
 #json,
 #search,
 #scrolling,
@@ -1061,6 +1106,7 @@ body.loading #version,
 	background-repeat: no-repeat;
 }
 
+#role::before,
 .message .statistics .provider::before,
 .message .statistics .ttft::before,
 .message .statistics .tps::before,
@@ -1399,6 +1445,7 @@ label[for="reasoning-tokens"] {
 }
 
 @keyframes swivel {
+
 	0%,
 	100% {
 		left: 0px;
@@ -1411,6 +1458,7 @@ label[for="reasoning-tokens"] {
 }
 
 @keyframes bounce {
+
 	0%,
 	75%,
 	100% {
@@ -1461,3 +1509,13 @@ label[for="reasoning-tokens"] {
 		display: none;
 	}
 }
+
+@media (max-width: 745px) {
+
+	.message,
+	.message.assistant {
+		width: 100%;
+		min-width: auto;
+		max-width: 100%;
+	}
+}

static/index.html

@@ -45,6 +45,23 @@
 
 				<div id="attachments" class="files"></div>
 
+				<div id="header">
+					<div id="role">
+						<select title="Message role">
+							<option value="user" selected>User</option>
+							<option value="assistant">Assistant</option>
+							<option value="system">System</option>
+						</select>
+					</div>
+
+					<div class="option">
+						<button id="export" title="Export the entire chat as a JSON file"></button>
+						<button id="import" title="Import a chat from an exported JSON file"></button>
+						<button id="dump" title="Dump the actual OpenRouter request for the current chat"></button>
+						<button id="clear" title="Clear the entire chat"></button>
+					</div>
+				</div>
+
 				<textarea id="message" placeholder="Type something..." autocomplete="off"></textarea>
 
 				<button id="upload" title="Add files to message"></button>
@@ -52,30 +69,10 @@
 				<button id="send" title="Add message to chat and start completion"></button>
 
 				<div class="options">
-					<div class="option">
-						<label for="role" title="Message role"></label>
-						<select id="role">
-							<option value="user" selected>User</option>
-							<option value="assistant">Assistant</option>
-							<option value="system">System</option>
-						</select>
-					</div>
 					<div class="option">
 						<label for="model" title="Model"></label>
 						<select id="model" data-searchable></select>
 					</div>
-					<div class="option">
-						<label for="prompt" title="Main system prompt"></label>
-						<select id="prompt" data-searchable></select>
-					</div>
-					<div class="option">
-						<label for="temperature" title="Temperature (0 - 2)"></label>
-						<input id="temperature" type="number" min="0" max="2" step="0.05" value="0.85" />
-					</div>
-					<div class="option">
-						<label for="iterations" title="Maximum number of iterations (turns) per response"></label>
-						<input id="iterations" type="number" min="1" max="50" value="3" />
-					</div>
 					<div class="option none">
 						<label for="reasoning-effort" title="Reasoning Effort"></label>
 						<select id="reasoning-effort">
@@ -89,6 +86,18 @@
 						<label for="reasoning-tokens" title="Maximum amount of reasoning tokens"></label>
 						<input id="reasoning-tokens" type="number" min="2" max="1048576" value="1024" />
 					</div>
+					<div class="option">
+						<label for="prompt" title="Main system prompt"></label>
+						<select id="prompt" data-searchable></select>
+					</div>
+					<div class="option">
+						<label for="temperature" title="Temperature (0 - 2)"></label>
+						<input id="temperature" type="number" min="0" max="2" step="0.05" value="0.85" />
+					</div>
+					<div class="option">
+						<label for="iterations" title="Maximum number of iterations (turns) per response"></label>
+						<input id="iterations" type="number" min="1" max="50" value="3" />
+					</div>
 					<div class="option group none">
 						<button id="json" title="Turn on structured json output"></button>
 						<button id="search" title="Turn on search tools (search_web and fetch_contents)"></button>
@@ -96,12 +105,6 @@
 					<div class="option">
 						<button id="scrolling" title="Turn on auto-scrolling"></button>
 					</div>
-					<div class="option">
-						<button id="export" title="Export the entire chat as a JSON file"></button>
-						<button id="import" title="Import a chat form a JSON file"></button>
-						<button id="dump" title="Dump the actual OpenRouter request for the current chat"></button>
-						<button id="clear" title="Clear the entire chat"></button>
-					</div>
 				</div>
 			</div>
 		</div>

static/js/chat.js

@@ -23,7 +23,7 @@
 		$bottom = document.getElementById("bottom"),
 		$resizeBar = document.getElementById("resize-bar"),
 		$attachments = document.getElementById("attachments"),
-		$role = document.getElementById("role"),
+		$role = document.getElementById("role").querySelector("select"),
 		$model = document.getElementById("model"),
 		$prompt = document.getElementById("prompt"),
 		$temperature = document.getElementById("temperature"),
@@ -2338,6 +2338,10 @@
 		}
 	});
 
+	addEventListener("resize", () => {
+		updateScrollButton();
+	});
+
 	dropdown($role);
 	dropdown($reasoningEffort);
 

static/js/dropdown.js

@@ -23,7 +23,7 @@
 					value: option.value,
 					label: option.textContent,
 
-					title: option.title || false,
+					title: option.title || "",
 					tags: tags ? tags.split(",") : [],
 
 					search: searchable(option.textContent),
@@ -173,8 +173,10 @@
 
 			const selection = this.#options[this.#selected];
 
-			this.#_selected.title = selection.title;
+			this.#_selected.title = selection.title || this.#_select.title;
 			this.#_selected.innerHTML = selection.el.innerHTML;
+
+			this.#_dropdown.setAttribute("data-value", selection.value);
 		}
 
 		#filter() {