diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 603aed8b..8ad6efb4 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -5,7 +5,8 @@
 			:class="{
 				'hide-motd': !$store.state.settings.motd,
 				'colored-nicks': $store.state.settings.coloredNicks,
-				'show-seconds': $store.state.settings.showSeconds,
+				'time-seconds': $store.state.settings.showSeconds,
+				'time-12h': $store.state.settings.use12hClock,
 			}"
 		>
 			<div
diff --git a/client/css/style.css b/client/css/style.css
index c79224e8..74376e26 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1309,12 +1309,18 @@ textarea.input {
 	padding-left: 10px;
 	width: 55px;
 	font-variant-numeric: tabular-nums;
+	box-sizing: content-box; /* highlights have a border-left */
 }
 
-#chat.show-seconds .time {
+#chat.time-12h .time,
+#chat.time-seconds .time {
 	width: 75px;
 }
 
+#chat.time-seconds.time-12h .time {
+	width: 90px;
+}
+
 #chat .from {
 	padding-right: 10px;
 	text-align: right;
@@ -1500,14 +1506,9 @@ textarea.input {
 
 #chat .chat-view[data-type="channel"] .msg.highlight .time {
 	padding-left: 5px;
-	width: 50px;
 	color: #696969;
 }
 
-#chat.show-seconds .chat-view[data-type="channel"] .msg.highlight .time {
-	width: 70px;
-}
-
 #chat .chat-view[data-type="channel"] .msg.highlight .content {
 	border-left: 1px solid var(--highlight-bg-color);
 }