diff --git a/src/generators/web/ui/components/SideBar/index.jsx b/src/generators/web/ui/components/SideBar/index.jsx
index 2868f4c3..052a4b99 100644
--- a/src/generators/web/ui/components/SideBar/index.jsx
+++ b/src/generators/web/ui/components/SideBar/index.jsx
@@ -32,6 +32,7 @@ export default ({ versions, pathname, currentVersion, docPages }) => (
     ]}
     onSelect={redirect}
     as={props => <a {...props} rel="prefetch" />}
+    title="Navigation"
   >
     <div>
       <Select
diff --git a/src/generators/web/ui/index.css b/src/generators/web/ui/index.css
index ac1aa5a4..92855072 100644
--- a/src/generators/web/ui/index.css
+++ b/src/generators/web/ui/index.css
@@ -14,6 +14,15 @@ main {
   code {
     font-size: inherit;
     font-weight: inherit;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  @media (min-width: 768px) {
+    code {
+      overflow-wrap: normal;
+      word-break: normal;
+    }
   }
 
   /* Don't overflow the parent */
@@ -35,8 +44,9 @@ main {
   /* Change history positioning */
   div:has(> h1, > h2, > h3, > h4, > h5, > h6) {
     display: flex;
-    align-items: center;
+    align-items: start;
     gap: 8px;
+    flex-direction: column;
 
     > h1,
     > h2,
@@ -45,13 +55,46 @@ main {
     > h5,
     > h6 {
       flex: 1;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+      margin-bottom: 8px;
+      overflow-wrap: anywhere;
+      word-break: break-word;
     }
 
     .change-history {
-      margin-left: auto;
+      margin-left: 0;
+
+      div[role='menu'] {
+        left: 0;
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    div:has(> h1, > h2, > h3, > h4, > h5, > h6) {
+      flex-direction: row;
+      align-items: center;
+
+      > h1,
+      > h2,
+      > h3,
+      > h4,
+      > h5,
+      > h6 {
+        margin-bottom: 0;
+        overflow-wrap: normal;
+        word-break: normal;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .change-history {
+        margin-left: auto;
+
+        div[role='menu'] {
+          left: initial;
+        }
+      }
     }
   }