fix: Garbled text in sidebar and dropdown menus on Linux

Linux users with Intel GPUs have been reporting issues with garbled
or ghosting text in the sidebar nav and header dropdown menu.

The exact cause is unknown but likely a Electron rendering issue with
Intel GPUs when opacity is set with the icons and text elements.

To workaround the problem we can set an element that will change the
stacking context directly on the problem elements.

Fixes: https://github.com/logseq/logseq/issues/7233

src/main/frontend/components/container.css

@@ -226,7 +226,7 @@
         li {
           margin: 0;
         }
-        
+
         a {
           width: 100%;
           padding: 4px 24px;
@@ -624,6 +624,13 @@ html[data-theme='dark'] {
   }
 }
 
+/* Workaround for Linux Intel GPU text rendering issue GH#7233 */
+.is-electron.is-linux .cp__menubar-repos {
+  #repo-switch, .nav-header .flex-1 {
+    position: relative;
+  }
+}
+
 @supports not (overflow-y: overlay) {
   .scrollbar-spacing {
     overflow-y: auto;

src/main/frontend/components/header.css

@@ -128,6 +128,11 @@
   padding-left: 1rem;
 }
 
+/* Workaround for Linux Intel GPU text rendering issue GH#7233 */
+.is-electron.is-linux .cp__header .dropdown-wrapper .title-wrap {
+  position: relative;
+}
+
 .cp__header a, .cp__header svg {
   -webkit-app-region: no-drag;
 }