Fix the css

Author: alina-derkach-oaza

_resourcepdf/overrides/partials/edit.html

@@ -1,11 +1,11 @@
 <div data-banner="data-banner">
   <div class="actions">
-    <a href="{{ page.edit_url }}" title="Edit on GitHub" class="edit-page-link">
+    <a href="{{ page.edit_url }}" title="Edit this page on GitHub" class="edit-page-link">
       <span class="edit-page-icon">
         {% set icon = config.theme.icon.edit or "material/file-edit-outline" %}
         {% include ".icons/" ~ icon ~ ".svg" %}
       </span>
-      <span class="edit-page-text">Edit on GitHub</span>
+      <span class="edit-page-text">Edit this page on GitHub</span>
     </a>
   </div>
 </div>

docs/css/extra.css

@@ -11,25 +11,26 @@
     line-height: 1.6;
 }
 
-/* Style the link */
 .edit-page-link {
+  white-space: nowrap;
   display: inline-flex;
   align-items: center;
-  gap: 0.8em;
-  text-decoration: none;
+  gap: 0.5em;
+
+  font-size: 1rem;
+  font-weight: normal;
   color: var(--md-typeset-a-color);
-  font-size: 1.35rem;
-  font-weight: 500;
-  line-height: 1.4;
-  transition: color 0.2s ease;
-  cursor: pointer;
+  text-decoration: underline;
+}
+
+.edit-page-link:hover {
+  color: var(--md-accent-fg-color);
 }
 
-/* Bigger icon, aligned with text */
 .edit-page-icon svg {
-  width: 1.4em;    
-  height: 1.4em;
-  fill: currentColor;
+  width: 1.25em;       /* Increase from 1em to 1.25em or more */
+  height: 1.25em;
+  fill: currentColor;  /* Make the icon match text color */
   vertical-align: middle;
 }