Clean grouping/ordering of css properties

frontend/.stylelintrc.cjs

@@ -1,4 +1,7 @@
 module.exports = {
-	extends: ["stylelint-config-standard"],
+	extends: [
+		"stylelint-config-standard", 
+		"stylelint-config-clean-order"
+	],
 	ignoreFiles: ["node_modules/**/*", "dist/**/*"]
 };

frontend/package.json

@@ -44,6 +44,7 @@
 		"happy-dom": "^12.9.1",
 		"prettier": "^2.8.8",
 		"stylelint": "^16.1.0",
+		"stylelint-config-clean-order": "^5.2.0",
 		"stylelint-config-standard": "^36.0.0",
 		"typescript": "^5.0.2",
 		"vite": "^4.4.11",

frontend/src/App.css

@@ -3,10 +3,9 @@
 }
 
 #root {
-	height: 100%;
-
 	/* firefox scrollbar styling */
 	scrollbar-color: var(--main-scrollbar-colour) transparent;
+	height: 100%;
 }
 
 ::-webkit-scrollbar {
@@ -25,19 +24,22 @@
 }
 
 .prompt-injection-min-button {
-	/* remove default button styling */
-	background-color: transparent;
-	border: 0.0625rem solid transparent;
-	color: var(--main-text-colour);
-	padding: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+
+	padding: 0;
+
+	color: var(--main-text-colour);
+
+	/* remove default button styling */
+	background-color: transparent;
+	border: 0.0625rem solid transparent;
 }
 
 .prompt-injection-min-button:hover {
-	border-color: var(--main-text-colour);
 	text-decoration: none;
+	border-color: var(--main-text-colour);
 }
 
 .dialog-modal {
@@ -46,18 +48,20 @@
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
+
+	margin: 0;
+	padding: 0;
+
 	background-color: transparent;
 	border: none;
-	padding: 0;
-	margin: 0;
 }
 
 .dialog-modal::backdrop {
 	background-color: var(--overlay-hidden-colour);
 }
 
 hr {
+	margin: 0.5rem 0;
 	border-top: 0.0625rem solid black;
 	border-bottom: transparent;
-	margin: 0.5rem 0;
 }

frontend/src/components/ChatBox/ChatBox.css

@@ -2,18 +2,21 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-end;
+
 	width: 100%;
 	height: 100%;
 }
 
 .chat-box .footer {
 	display: flex;
 	flex-direction: column;
+	gap: 1.25rem;
+
+	box-sizing: border-box;
 	width: 100%;
-	font-size: 0.75rem;
 	padding: 2rem;
-	box-sizing: border-box;
-	gap: 1.25rem;
+
+	font-size: 0.75rem;
 }
 
 .chat-box .footer label {
@@ -25,37 +28,40 @@
 .chat-box .footer .messages {
 	display: flex;
 	flex-direction: row;
-	align-items: flex-end;
 	gap: 0.5rem;
+	align-items: flex-end;
+
 	width: 100%;
 }
 
 .chat-box .footer .messages .send-button-wrapper {
 	display: flex;
-	justify-content: stretch;
 	align-items: stretch;
+	justify-content: stretch;
 	height: 3.75rem;
 }
 
 .chat-box .footer .messages .send-button-wrapper .themed-button {
-	border-radius: 0.625rem;
 	width: 3.75rem;
+	border-radius: 0.625rem;
 }
 
 .chat-box .footer .messages .themed-text-area {
+	min-height: 3.75rem;
+
+	font-size: 1rem;
+	font-weight: 400;
+	color: var(--chat-button-text-colour);
+
 	background-color: var(--chat-button-background-colour);
 	border: 1px solid var(--chat-button-border-colour);
 	border-radius: 0.625rem;
-	color: var(--chat-button-text-colour);
-	font-size: 1rem;
-	font-weight: 400;
-	min-height: 3.75rem;
 }
 
 .chat-box .footer .control-buttons {
 	display: flex;
-	height: 2.5rem;
 	column-gap: 1rem;
+	height: 2.5rem;
 }
 
 .chat-box .footer .control-buttons > * {

frontend/src/components/ChatBox/ChatBoxFeed.css

@@ -1,8 +1,10 @@
 .chat-box-feed {
+	scrollbar-width: thin;
+
+	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
-	overflow-y: auto;
-	scrollbar-width: thin;
-	padding: 0 2rem;
+
 	height: fit-content;
+	padding: 0 2rem;
 }

frontend/src/components/ChatBox/ChatBoxInfoText.css

@@ -1,36 +1,36 @@
 .chat-box-info {
+	padding-top: 1rem;
 	font-size: 0.875rem;
 	font-style: italic;
-	padding-top: 1rem;
 	text-align: center;
 }
 
 .chat-box-info.info-text {
-	color: var(--chat-info-text-colour);
 	margin: 0.1rem;
+	color: var(--chat-info-text-colour);
 }
 
 .chat-box-info.defence-alerted-text {
 	color: var(--chat-alerted-text-colour);
 }
 
 .chat-box-info.defence-triggered-text {
-	color: var(--chat-triggered-text-colour);
 	margin-bottom: 0.1rem;
+	color: var(--chat-triggered-text-colour);
 }
 
 .chat-box-info.reset-level-text {
+	margin: 0.6rem 0.1rem;
+	line-height: 0.1em;
 	color: var(--chat-info-text-colour);
 	border-bottom: 1px solid var(--chat-reset-level-line-colour);
-	line-height: 0.1em;
-	margin: 0.6rem 0.1rem;
 }
 
 .chat-box-info.reset-level-text:focus-visible {
 	outline-offset: 0.5rem;
 }
 
 .chat-box-info.reset-level-text span {
-	background: var(--main-text-colour);
 	padding: 0 1rem;
+	background: var(--main-text-colour);
 }

frontend/src/components/ChatBox/ChatBoxInput.css

@@ -1,10 +1,13 @@
 .visually-hidden {
 	position: absolute;
+
+	overflow: hidden;
+
 	width: 1px;
 	height: 1px;
 	margin: -1px;
 	padding: 0;
-	overflow: hidden;
+
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }

frontend/src/components/ChatBox/ChatBoxMessage/Avatar.css

@@ -1,11 +1,13 @@
 .avatar-circle {
-	border-radius: 50%;
-	width: 3.75rem;
-	height: 3.75rem;
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
 	align-items: center;
+	justify-content: center;
+
+	width: 3.75rem;
+	height: 3.75rem;
+
+	border-radius: 50%;
 }
 
 .avatar-circle-user {

frontend/src/components/ChatBox/ChatBoxMessage/ChatBoxMessage.css

@@ -1,8 +1,8 @@
 .chat-box-message {
 	display: flex;
 	flex-direction: row;
-	margin-top: 1rem;
 	gap: 1.5rem;
+	margin-top: 1rem;
 }
 
 .chat-box-message-right {

frontend/src/components/ChatBox/ChatBoxMessage/MessageBubble.css

@@ -1,55 +1,57 @@
 .message-bubble {
-	border-radius: 1.25rem;
-	padding: 1.25rem;
 	max-width: 65%;
+	padding: 1.25rem;
+
 	hyphens: auto;
-	word-wrap: break-word;
-	border: 0.0625rem solid transparent;
 	color: var(--chat-bot-text-colour);
+	word-wrap: break-word;
 	white-space: pre-line;
+
+	border: 0.0625rem solid transparent;
+	border-radius: 1.25rem;
 }
 
 .message-bubble.bot {
-	border-color: var(--chat-bot-border-colour);
 	background-color: var(--chat-bot-background-colour);
+	border-color: var(--chat-bot-border-colour);
 }
 
 .message-bubble.blocked {
-	border-color: var(--chat-blocked-border-colour);
 	background-color: var(--chat-blocked-background-colour);
+	border-color: var(--chat-blocked-border-colour);
 }
 
 .message-bubble.error {
-	border-color: var(--chat-blocked-border-colour);
 	background-color: var(--chat-blocked-background-colour);
+	border-color: var(--chat-blocked-border-colour);
 }
 
 .message-bubble.user {
-	border-color: var(--chat-user-border-colour);
-	background-color: var(--chat-user-background-colour);
 	color: var(--main-text-colour);
+	background-color: var(--chat-user-background-colour);
+	border-color: var(--chat-user-border-colour);
 }
 
 .message-bubble.transformed {
+	color: var(--chat-transformed-text-colour);
 	background-color: var(--chat-transformed-background-colour);
 	border-color: var(--chat-transformed-border-colour);
-	color: var(--chat-transformed-text-colour);
 }
 
 .message-bubble.transformed b {
 	color: var(--chat-transformed-text-highlight-colour);
 }
 
 .message-bubble.level-info {
-	background-color: var(--email-background-colour);
-	color: var(--chat-level-info-text-colour);
 	max-width: 100%;
+	color: var(--chat-level-info-text-colour);
+	background-color: var(--email-background-colour);
 }
 
 .message-bubble.level-info .header {
-	font-weight: bold;
 	margin-top: 0;
 	margin-bottom: 0.3125rem;
+	font-weight: bold;
 }
 
 .message-bubble.left {