From d308601f732264304064e49185487eff720571ba Mon Sep 17 00:00:00 2001
From: Peter Chinman <peter.chinman@gmail.com>
Date: Thu, 1 Jan 2026 23:10:47 -0500
Subject: [PATCH 1/2] add footer and fix tooltips

---
 components/chat-editor.js | 21 +++++++++++----------
 index.html                |  3 +++
 styles.css                | 37 ++++++++++++++++++++++++++++---------
 utils/tooltip.js          |  2 --
 4 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/components/chat-editor.js b/components/chat-editor.js
index 1b6ac0c..5eb9d81 100644
--- a/components/chat-editor.js
+++ b/components/chat-editor.js
@@ -1,6 +1,7 @@
 import { store } from './store.js';
 import './message-card.js';
 import './icon-arrow.js';
+import { initTooltips } from '../utils/tooltip.js';
 import { html } from '../utils/template.js';
 
 class ChatEditor extends HTMLElement {
@@ -121,16 +122,16 @@ class ChatEditor extends HTMLElement {
 			</style>
 			<div class="wrapper">
 				<div class="editor-header">
-					<button id="export-json" title="Export chat as JSON">Export</button>
-					<button id="import-json" title="Import chat from JSON">Import</button>
-					<button id="clear-chat" title="Clear all messages">Clear</button>
-					<button
-						id="toggle-theme"
-						title="Toggle theme"
-						aria-label="Toggle theme"
-					>
-						Theme
+					<button id="export-json" data-tooltip="Export chat as JSON">
+						Export
 					</button>
+					<button id="import-json" data-tooltip="Import chat from JSON">
+						Import
+					</button>
+					<button id="clear-chat" data-tooltip="Clear all messages">
+						Clear
+					</button>
+					<button id="toggle-theme" data-tooltip="Toggle theme">Theme</button>
 					<icon-arrow
 						text="Preview"
 						activates-mode="preview"
@@ -279,6 +280,7 @@ class ChatEditor extends HTMLElement {
 		store.load();
 		this.#syncRecipientInputs(store.getRecipient());
 		this.#render(store.getMessages());
+		initTooltips(this.shadowRoot, this);
 	}
 
 	disconnectedCallback() {
@@ -339,7 +341,6 @@ class ChatEditor extends HTMLElement {
 		const next = current === 'dark' ? 'light' : 'dark';
 		btn.textContent = next === 'dark' ? 'Dark' : 'Light';
 		btn.title = `Switch to ${next} theme`;
-		btn.setAttribute('aria-label', `Switch to ${next} theme`);
 	}
 
 	_onStoreChange(e) {
diff --git a/index.html b/index.html
index 88aa758..e366a78 100644
--- a/index.html
+++ b/index.html
@@ -78,6 +78,9 @@
 				<chat-preview></chat-preview>
 			</section>
 		</main>
+		<footer class="footer">
+			<p>Made by <a href="https://peterchinman.com" target="_blank">Peter Chinman</a>. See this project on GitHub <a href="https://github.com/peterchinman/message-simulator" target="_blank">here</a>.</p>
+		</footer>
 		<script type="module" src="./components/chat-editor.js"></script>
 		<script type="module" src="./components/chat-preview.js"></script>
 	</body>
diff --git a/styles.css b/styles.css
index a2bf216..d22bd3d 100644
--- a/styles.css
+++ b/styles.css
@@ -110,25 +110,49 @@ html {
 
 body {
 	height: calc(var(--vh, 1dvh) * 100);
+	max-height: calc(var(--vh, 1dvh) * 100);
 	max-width: 100dvw;
 	overflow: hidden;
 	overscroll-behavior: none;
-
 	font-family: var(--font-base);
 	color: var(--color-ink);
+
+	display: flex;
+	flex-direction: column;
 }
 
 .app-container {
-	width: 100%;
-	height: 100%;
+	flex: 1 1 auto;
+	min-height: 0;
 	display: grid;
 	grid-template-columns: 1fr;
 }
 
+footer {
+	display: none;
+	background: var(--color-header);
+	/* border-top: 1px solid var(--color-edge); */
+	width: 100%;
+	flex: 0 0 auto;
+	color: var(--color-ink-subdued);
+	align-items: center;
+	justify-content: flex-start;
+	padding-inline: 4vw;
+	padding-block: .5rem;
+
+	a {
+		color: var(--color-bubble-self);
+	}
+}
+
 @media (min-width: 900px) {
 	.app-container {
 		grid-template-columns: 1fr 1fr;
 	}
+
+	footer {
+		display: flex;
+	}
 }
 .pane--editor,
 .pane--preview {
@@ -172,11 +196,8 @@ body {
 }
 
 @media (min-width: 900px) {
-	body {
-		padding: 4dvw;
-	}
-
 	.app-container {
+		padding: 4dvw;
 		gap: 4dvw;
 	}
 
@@ -200,14 +221,12 @@ body {
 
 	.pane {
 		min-height: 0;
-		height: 100%;
 	}
 
 	.pane--editor chat-editor,
 	.pane--preview chat-preview {
 		display: block;
 		min-height: 0;
-		height: 100%;
 		background: var(--color-page);
 
 		border-radius: calc(18rem / 14);
diff --git a/utils/tooltip.js b/utils/tooltip.js
index 6a11848..f10eebd 100644
--- a/utils/tooltip.js
+++ b/utils/tooltip.js
@@ -59,7 +59,6 @@ const TOOLTIP_CSS_TEXT = /* css */ `
 		font-size: calc(12rem / 14);
 		line-height: calc(16rem / 14);
 		opacity: 0;
-		transition: opacity 0.15s ease-in-out;
 		display: flex;
 		flex-direction: column;
 		gap: calc(4rem / 14);
@@ -232,7 +231,6 @@ export function initTooltips(root = document, hostElement = null) {
 
 		if (bubble) {
 			bubble.classList.toggle('has-subtext', Boolean(subtext));
-			// Match previous UX: delay before showing, but not before hiding
 			bubble.style.transitionDelay = '0.5s';
 		}
 

From 91be347edae93a3c607252f52b9146892c16ddc8 Mon Sep 17 00:00:00 2001
From: Peter Chinman <peter.chinman@gmail.com>
Date: Thu, 1 Jan 2026 23:11:43 -0500
Subject: [PATCH 2/2] fix formatting

---
 index.html | 11 ++++++++++-
 styles.css |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index e366a78..2d3e16e 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,16 @@
 			</section>
 		</main>
 		<footer class="footer">
-			<p>Made by <a href="https://peterchinman.com" target="_blank">Peter Chinman</a>. See this project on GitHub <a href="https://github.com/peterchinman/message-simulator" target="_blank">here</a>.</p>
+			<p>
+				Made by
+				<a href="https://peterchinman.com" target="_blank">Peter Chinman</a>.
+				See this project on GitHub
+				<a
+					href="https://github.com/peterchinman/message-simulator"
+					target="_blank"
+					>here</a
+				>.
+			</p>
 		</footer>
 		<script type="module" src="./components/chat-editor.js"></script>
 		<script type="module" src="./components/chat-preview.js"></script>
diff --git a/styles.css b/styles.css
index d22bd3d..4edf3cf 100644
--- a/styles.css
+++ b/styles.css
@@ -138,7 +138,7 @@ footer {
 	align-items: center;
 	justify-content: flex-start;
 	padding-inline: 4vw;
-	padding-block: .5rem;
+	padding-block: 0.5rem;
 
 	a {
 		color: var(--color-bubble-self);