Improve spoiler titles

lib/community/widgets/community_sidebar.dart

@@ -111,9 +111,12 @@ class _CommunitySidebarState extends State<CommunitySidebar> {
                       child: ListView(
                         shrinkWrap: true,
                         children: [
-                          CommonMarkdownBody(
-                            body: communityView.community.description ?? '',
-                            imageMaxWidth: (kSidebarWidthFactor - 0.1) * MediaQuery.of(context).size.width,
+                          Material(
+                            child: CommonMarkdownBody(
+                              body: communityView.community.description ?? '',
+                              imageMaxWidth: (kSidebarWidthFactor - 0.1) * MediaQuery.of(context).size.width,
+                              allowHorizontalTranslation: false,
+                            ),
                           ),
                           const SidebarSectionHeader(value: "Stats"),
                           Padding(

lib/shared/common_markdown_body.dart

@@ -31,13 +31,16 @@ class CommonMarkdownBody extends StatelessWidget {
 
   final double? imageMaxWidth;
 
+  final bool allowHorizontalTranslation;
+
   const CommonMarkdownBody({
     super.key,
     required this.body,
     this.hideContent = false,
     this.isSelectableText = false,
     this.isComment,
     this.imageMaxWidth,
+    this.allowHorizontalTranslation = true,
   });
 
   @override
@@ -111,7 +114,7 @@ class CommonMarkdownBody extends StatelessWidget {
       extensionSet: customExtensionSet,
       inlineSyntaxes: [LemmyLinkSyntax(), SpoilerInlineSyntax()],
       builders: {
-        'spoiler': SpoilerElementBuilder(),
+        'spoiler': SpoilerElementBuilder(allowHorizontalTranslation: allowHorizontalTranslation),
       },
       imageBuilder: (uri, title, alt) {
         if (hideContent) return Container();
@@ -283,6 +286,10 @@ class SpoilerBlockSyntax extends md.BlockSyntax {
 ///
 /// This breaks down the combined title/body and creates the resulting [SpoilerWidget]
 class SpoilerElementBuilder extends MarkdownElementBuilder {
+  final bool allowHorizontalTranslation;
+
+  SpoilerElementBuilder({required this.allowHorizontalTranslation});
+
   @override
   Widget? visitElementAfter(md.Element element, TextStyle? preferredStyle) {
     String rawText = element.textContent;
@@ -295,7 +302,7 @@ class SpoilerElementBuilder extends MarkdownElementBuilder {
 
     String? title = parts[0].trim();
     String? body = parts[1].trim();
-    return SpoilerWidget(title: title, body: body);
+    return SpoilerWidget(title: title, body: body, allowHorizontalTranslation: allowHorizontalTranslation);
   }
 }
 
@@ -304,7 +311,9 @@ class SpoilerWidget extends StatefulWidget {
   final String? title;
   final String? body;
 
-  const SpoilerWidget({super.key, this.title, this.body});
+  final bool allowHorizontalTranslation;
+
+  const SpoilerWidget({super.key, this.title, this.body, required this.allowHorizontalTranslation});
 
   @override
   State<SpoilerWidget> createState() => _SpoilerWidgetState();
@@ -324,15 +333,15 @@ class _SpoilerWidgetState extends State<SpoilerWidget> {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Container(
-          transform: Matrix4.translationValues(-4.0, 0, 0.0), // Move the Inkwell slightly to the left to line up text
+          transform: Matrix4.translationValues(widget.allowHorizontalTranslation ? -4.0 : 0, 0, 0.0), // Move the Inkwell slightly to the left to line up text
           child: InkWell(
             borderRadius: const BorderRadius.all(Radius.elliptical(5, 5)),
             onTap: () {
               expandableController.toggle();
               setState(() {}); // Update the state to trigger the collapse/expand
             },
             child: Padding(
-              padding: const EdgeInsets.only(top: 4.0, bottom: 4.0, left: 4.0),
+              padding: EdgeInsets.only(top: 4.0, bottom: 4.0, left: widget.allowHorizontalTranslation ? 4.0 : 0),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 crossAxisAlignment: CrossAxisAlignment.start,
@@ -347,6 +356,7 @@ class _SpoilerWidgetState extends State<SpoilerWidget> {
                   Icon(
                     expandableController.expanded ? Icons.expand_less_rounded : Icons.expand_more_rounded,
                     semanticLabel: expandableController.expanded ? l10n.collapseSpoiler : l10n.expandSpoiler,
+                    size: 20,
                   ),
                 ],
               ),

lib/user/widgets/user_sidebar.dart

@@ -232,9 +232,12 @@ class _UserSidebarState extends State<UserSidebar> {
                                   right: 8,
                                   bottom: 8,
                                 ),
-                                child: CommonMarkdownBody(
-                                  body: widget.userInfo?.person.bio ?? 'Nothing here. This user has not written a bio.',
-                                  imageMaxWidth: (kSidebarWidthFactor - 0.1) * MediaQuery.of(context).size.width,
+                                child: Material(
+                                  child: CommonMarkdownBody(
+                                    body: widget.userInfo?.person.bio ?? 'Nothing here. This user has not written a bio.',
+                                    imageMaxWidth: (kSidebarWidthFactor - 0.1) * MediaQuery.of(context).size.width,
+                                    allowHorizontalTranslation: false,
+                                  ),
                                 ),
                               ),
                               const Padding(