From 46aeccfc35c18bcc46f4b8e7cef9e6e07429b519 Mon Sep 17 00:00:00 2001
From: Nemo Godebski-Pedersen <nemozak1@gmail.com>
Date: Wed, 5 Nov 2025 16:45:37 +0700
Subject: [PATCH 1/2] fix glossary scrollbars

---
 src/components/GlossarySearchNav.vue |  3 --
 src/views/GlossaryView.vue           | 46 ++++++++++++++--------------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/components/GlossarySearchNav.vue b/src/components/GlossarySearchNav.vue
index c22969b..32b5198 100644
--- a/src/components/GlossarySearchNav.vue
+++ b/src/components/GlossarySearchNav.vue
@@ -106,7 +106,6 @@ const searchEvent = (event) => {
 <style scoped>
 .tabs {
   display: flex;
-  max-height: 90vh;
 }
 
 .alphabet {
@@ -155,8 +154,6 @@ const searchEvent = (event) => {
 }
 
 .tab-items {
-  overflow: auto;
-  max-height: 100vh;
   margin-top: 10px;
   margin-right: -8px;
 }
diff --git a/src/views/GlossaryView.vue b/src/views/GlossaryView.vue
index 1bdc4d0..d63b07a 100644
--- a/src/views/GlossaryView.vue
+++ b/src/views/GlossaryView.vue
@@ -34,39 +34,39 @@ const glossary = ref(inject(obpGlossaryKey)!.glossary_items)
 </script>
 
 <template>
-  <el-container>
+  <el-container class="glossary-container">
     <el-aside class="search-nav" width="20%">
-      <SearchNav />
+      <el-scrollbar>
+        <SearchNav />
+      </el-scrollbar>
     </el-aside>
-    <el-main>
-      <el-container class="main">
-        <el-container>
-          <main>
-            <el-backtop :right="100" :bottom="100" target="main" />
-            <div v-for="(value, key) of glossary" :key="value">
-              <span>
-                <a v-bind:href="`#${value.title}`" :id="value.title">
-                  {{ value.title }}
-                </a>
-              </span>
-              <div v-html="value.description.html" class="content"></div>
-            </div>
-          </main>
-        </el-container>
-      </el-container>
+    <el-main class="glossary-content">
+      <el-scrollbar>
+        <el-backtop :right="100" :bottom="100" />
+        <div v-for="(value, key) of glossary" :key="value">
+          <span>
+            <a v-bind:href="`#${value.title}`" :id="value.title">
+              {{ value.title }}
+            </a>
+          </span>
+          <div v-html="value.description.html" class="content"></div>
+        </div>
+      </el-scrollbar>
     </el-main>
   </el-container>
 </template>
 
 <style scoped>
-.main {
-  max-height: 90vh;
-  overflow-y: auto;
+.glossary-container {
+  height: calc(100vh - 60px);
 }
-main {
-  margin: 25px;
+.glossary-content {
   color: #39455f;
   font-family: 'Roboto';
+  padding: 0;
+}
+.glossary-content :deep(.el-scrollbar__view) {
+  padding: 25px;
 }
 span {
   font-size: 28px;

From 58dfa6b17208bb36215b0ad240106630c71b1aa2 Mon Sep 17 00:00:00 2001
From: Nemo Godebski-Pedersen <nemozak1@gmail.com>
Date: Wed, 5 Nov 2025 17:54:45 +0700
Subject: [PATCH 2/2] fixed horizontal scrolling issue

---
 src/views/GlossaryView.vue | 44 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/src/views/GlossaryView.vue b/src/views/GlossaryView.vue
index d63b07a..55e730e 100644
--- a/src/views/GlossaryView.vue
+++ b/src/views/GlossaryView.vue
@@ -60,20 +60,64 @@ const glossary = ref(inject(obpGlossaryKey)!.glossary_items)
 .glossary-container {
   height: calc(100vh - 60px);
 }
+.search-nav :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden;
+}
+.search-nav :deep(.el-scrollbar__view) {
+  padding: 10px;
+}
 .glossary-content {
   color: #39455f;
   font-family: 'Roboto';
   padding: 0;
 }
+.glossary-content :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden;
+}
 .glossary-content :deep(.el-scrollbar__view) {
   padding: 25px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 span {
   font-size: 28px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 div {
   font-size: 14px;
 }
+.content {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+}
+.content :deep(*) {
+  max-width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+.content :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+.content :deep(table) {
+  max-width: 100%;
+  table-layout: fixed;
+  word-wrap: break-word;
+}
+.content :deep(pre) {
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.content :deep(code) {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
 .content :deep(strong) {
   font-family: 'Roboto';
 }