fix: Improve sidebar workaround for Linux w/Intel GPU

Previous fixes set an opacity value of 1 which affects the sidebar
styling for Linux users.

The problem of corrupted text in the sidebar seems to be related to
stacking contexts therefore using `position: relative` to create a new
one for affected text elements is an alternative workaround that has no
effect on styling.

Ref: laurent22#7506
Ref: laurent22#8000

packages/app-desktop/gui/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect, useRef, useCallback, useMemo } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import shim from '@joplin/lib/shim';
 import { StyledRoot, StyledAddButton, StyledShareIcon, StyledHeader, StyledHeaderIcon, StyledAllNotesIcon, StyledHeaderLabel, StyledListItem, StyledListItemAnchor, StyledExpandLink, StyledNoteCount, StyledSyncReportText, StyledSyncReport, StyledSynchronizeButton } from './styles';
 import { ButtonLevel } from '../Button/Button';
@@ -40,22 +40,19 @@ const { clipboard } = require('electron');
 
 const logger = Logger.create('Sidebar');
 
-const StyledFoldersHolder = styled.div`
-	// linux bug: https://github.com/laurent22/joplin/issues/7506#issuecomment-1447101057
-	& a.list-item {
-		${shim.isLinux() && {
-		opacity: 1,
-	}}
-	}
+const StyledFolderTitle = styled.span`
+	line-height: 0;
+	// Linux Intel rendering bug: https://github.com/laurent22/joplin/issues/7506
+	${shim.isLinux() && css`
+		position: relative;
+	`}
 `;
-const TagsHolder = styled.div`
-	// linux bug: https://github.com/laurent22/joplin/issues/8000
-	// solution ref: https://github.com/laurent22/joplin/issues/7506#issuecomment-1447101057
-	& a.list-item {
-		${shim.isLinux() && {
-		opacity: 1,
-	}}
-	}
+
+const StyledTagLabel = styled.span`
+	// Linux Intel rendering bug: https://github.com/laurent22/joplin/issues/8000
+	${shim.isLinux() && css`
+		position: relative;
+	`}
 `;
 
 interface Props {
@@ -138,7 +135,8 @@ function FolderItem(props: any) {
 				}}
 				onDoubleClick={onFolderToggleClick_}
 			>
-				{showFolderIcon ? renderFolderIcon(folderIcon) : null}<span className="title" style={{ lineHeight: 0 }}>{folderTitle}</span>
+				{ /* Perhaps a StyledFolderTitle to replace span */ }
+				{showFolderIcon ? renderFolderIcon(folderIcon) : null}<StyledFolderTitle className="title">{folderTitle}</StyledFolderTitle>
 				{shareIcon} {noteCountComp}
 			</StyledListItemAnchor>
 		</StyledListItem>
@@ -573,7 +571,7 @@ const SidebarComponent = (props: Props) => {
 						tagItem_click(tag);
 					}}
 				>
-					<span className="tag-label">{Tag.displayTitle(tag)}</span>
+					{ renderFolderIcon(null) }<StyledTagLabel className="tag-label">{Tag.displayTitle(tag)}</StyledTagLabel>
 					{noteCount}
 				</StyledListItemAnchor>
 			</StyledListItem>
@@ -725,13 +723,13 @@ const SidebarComponent = (props: Props) => {
 		const folderItems = [renderAllNotesItem(theme, allNotesSelected)].concat(result.items);
 		folderItemsOrder_.current = result.order;
 		items.push(
-			<StyledFoldersHolder
+			<div
 				className={`folders ${props.folderHeaderIsExpanded ? 'expanded' : ''}`}
 				key="folder_items"
 				style={foldersStyle}
 			>
 				{folderItems}
-			</StyledFoldersHolder>
+			</div>
 		);
 	}
 
@@ -747,9 +745,9 @@ const SidebarComponent = (props: Props) => {
 		tagItemsOrder_.current = result.order;
 
 		items.push(
-			<TagsHolder className="tags" key="tag_items" style={{ display: props.tagHeaderIsExpanded ? 'block' : 'none' }}>
+			<div className="tags" key="tag_items" style={{ display: props.tagHeaderIsExpanded ? 'block' : 'none' }}>
 				{tagItems}
-			</TagsHolder>
+			</div>
 		);
 	}