fix: corrected category images solution from 4.1, closes #3648

Author: thorsten

phpmyfaq/assets/scss/layout/_category.scss

@@ -2,3 +2,12 @@
   list-style: none;
   margin-left: 0;
 }
+
+// Category image styling to prevent overflow
+.bg-light-subtle .img-fluid.float-end {
+  max-width: 140px !important;
+  max-height: 140px !important;
+  width: auto;
+  height: auto;
+  object-fit: cover;
+}

phpmyfaq/assets/templates/default/show.twig

@@ -12,13 +12,12 @@
 
   <div class="col-md-4">
     <div class="position-sticky" style="top: 2rem">
-      <div class="p-4 mb-3 bg-light-subtle rounded border">
+      <div class="p-4 mb-3 bg-light-subtle rounded border clearfix overflow-hidden">
         {% if categoryImage is not empty %}
-        <img src="{{ categoryImage }}" alt="{{ categoryFaqsHeader }}" width="140" height="140"
-             class="rounded img-fluid float-end m-1">
+          <img src="{{ categoryImage }}" alt="{{ categoryFaqsHeader }}" class="rounded img-fluid float-end m-1">
         {% endif %}
-        <h4 class="fst-italic">{{ categoryFaqsHeader }}</h4>
-        <p class="mb-0 small">{{ categoryDescription }}</p>
+        <h4 class="fst-italic">{{ categoryFaqsHeader | raw }}</h4>
+        <p class="mb-0 small">{{ categoryDescription | raw }}</p>
       </div>
 
       {% if subCategoryContent != null %}