From 5e64297ceccaf0586fe14495a8af1ad8edad8141 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sun, 22 Jun 2025 22:14:43 +0100
Subject: [PATCH] Adjustments

---
 examples/website/index.html                   | 35 +++++++++++--------
 examples/website/style.css                    | 33 ++++++++++-------
 .../utils/elongate_operations.rs              |  7 ++--
 3 files changed, 46 insertions(+), 29 deletions(-)
diff --git a/examples/website/index.html b/examples/website/index.html
index 83bfafb..2ced4ab 100644
--- a/examples/website/index.html
+++ b/examples/website/index.html
@@ -23,6 +23,8 @@
         <link rel="stylesheet" href="style.css" />
     </head>
     <body>
+        <div class="background"></div>
+
         <div class="page-wrapper">
             <header>
                 <h1>3-Way Text Merge</h1>
@@ -66,34 +68,40 @@
 
             <main>
                 <div class="text-area-card diamond-parent">
-                    <label for="original">Original</label>
+                    <label
+                        for="original"
+                        title="The text document's content before any concurrent edits occurred."
+                        >Original</label
+                    >
                     <textarea id="original" name="original"></textarea>
                 </div>
 
                 <div class="text-area-card diamond-left">
-                    <label for="left">
+                    <label
+                        for="left"
+                        title="Colour-coded tokens mark the origin of each token in the result. This text box is marked with the colour green."
+                    >
                         First concurrent edit
-                        <div
-                            class="box Left"
-                            title="Colour-coded tokens mark the origin of each token, including ones that got deleted."
-                        ></div>
+                        <div class="box Left"></div>
                     </label>
                     <textarea id="left" name="left"></textarea>
                 </div>
 
                 <div class="text-area-card diamond-right">
-                    <label for="right"
-                        >Second concurrent edit
-                        <div
-                            class="box Right"
-                            title="Colour-coded tokens mark the origin of each token, including ones that got deleted."
-                        ></div>
+                    <label
+                        for="right"
+                        title="Colour-coded tokens mark the origin of each token in the result. This text box is marked with the colour blue."
+                    >
+                        Second concurrent edit
+                        <div class="box Right"></div>
                     </label>
                     <textarea id="right" name="right"></textarea>
                 </div>
 
                 <div class="text-area-card diamond-result">
-                    <label>
+                    <label
+                        title="Read-only. Change the above text boxes to change the content of this box."
+                    >
                         Deconflicted result
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -105,7 +113,6 @@
                             stroke-width="2"
                             stroke-linecap="round"
                             stroke-linejoin="round"
-                            title="Read-only. Change the above text boxes to change the content of this box."
                         >
                             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                             <path
diff --git a/examples/website/style.css b/examples/website/style.css
index 7d5fe7a..00f785d 100644
--- a/examples/website/style.css
+++ b/examples/website/style.css
@@ -15,12 +15,23 @@ body {
     overflow-y: auto;
 }
 
+.background {
+    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
 .page-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 100%;
-    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
+    max-width: 1000px;
+    margin: 0 auto;
 }
 
 header {
@@ -57,7 +68,7 @@ main {
     gap: 20px;
     justify-items: center;
     align-items: center;
-    padding: 32px 12vw 32px 12vw;
+    padding: 32px;
 }
 
 .diamond-parent {
@@ -77,8 +88,6 @@ main {
 .diamond-result {
     grid-column: 1 / -1;
     grid-row: 3;
-    display: flex;
-    align-items: center;
 }
 
 .diamond-result label {
@@ -87,13 +96,12 @@ main {
 }
 
 .diamond-result svg {
-    margin-left: 6px;
+    width: 20px;
+    height: 20px;
+    margin-left: 8px;
 }
 
 .text-area-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     width: 100%;
     height: 100%;
     background: #fff;
@@ -104,9 +112,11 @@ main {
 }
 
 label {
+    display: inline-block;
     margin-bottom: 8px;
     font-weight: 600;
     color: #2451a6;
+    cursor: help;
 }
 
 .box {
@@ -144,7 +154,7 @@ textarea {
 .Right,
 .AddedFromRight,
 .RemovedFromRight {
-    background: #8575ed;
+    background: #85bff7;
 }
 
 .RemovedFromLeft,
@@ -193,10 +203,7 @@ footer {
     justify-content: center;
     align-items: center;
     color: #5a6272;
-    font-size: 1rem;
-    box-shadow: 0 -4px 12px 0 rgba(28, 28, 87, 0.1),
-        0 -1px 2px 0 rgba(1, 1, 3, 0.1);
-    background-color: #fff;
+    border-radius: 32px;
 }
 
 .github-link > svg {
diff --git a/src/operation_transformation/utils/elongate_operations.rs b/src/operation_transformation/utils/elongate_operations.rs
index 1a218c6..c0b25fb 100644
--- a/src/operation_transformation/utils/elongate_operations.rs
+++ b/src/operation_transformation/utils/elongate_operations.rs
@@ -78,7 +78,7 @@ mod tests {
     }
 
     fn ins_custom(text: &str, lj: bool, rj: bool) -> RawOperation<String> {
-        RawOperation::Insert(vec![Token::new(text.to_string(), text.to_string(), lj, rj)])
+        RawOperation::Insert(vec![Token::new(text.to_owned(), text.to_owned(), lj, rj)])
     }
 
     #[test]
@@ -88,7 +88,10 @@ mod tests {
         assert_eq!(result.len(), 1);
         match &result[0] {
             RawOperation::Insert(tokens) => {
-                let originals: String = tokens.iter().map(|t| t.original()).collect();
+                let originals: String = tokens
+                    .iter()
+                    .map(crate::tokenizer::token::Token::original)
+                    .collect();
                 assert_eq!(originals, "abc");
             }
             _ => panic!("Expected single Insert operation"),
