bar chart for polls - tweaked for long labels

pleroma-comments.css

@@ -0,0 +1,106 @@
+
+.pleroma-comment blockquote {
+    border-left: 3px solid red;
+    padding-left:1%;
+}
+
+.pleroma-comment h3 > a {
+    text-decoration:none;
+}
+
+.pleroma-comment > figure {
+    display:flex;
+    align-items:center;
+}
+.pleroma-comment > figure img {
+    height:5em;
+    margin-right: 1em;
+}
+
+/* meta information about post */
+.pleroma-comment p, .pleroma-comment .chart {
+    margin-left: 5%;
+}
+
+/* usernames can either be figcaption or the first paragraph in the element */
+
+.pleroma-comment + p, .pleroma-comment figcaption {
+    font-weight:bold;
+}
+.pleroma-comment p > a, .pleroma-comment figcaption > a {
+    font-weight:normal;
+    text-decoration:none;
+}
+
+.pleroma-comment .card {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    overflow: hidden;
+    width: 300px; /* Adjust as needed */
+    margin: 1%;
+    margin-left:10%;
+/*     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+}
+.pleroma-comment .card-title {
+    font-size: 1.5em;
+    margin: 3%;
+}
+.pleroma-comment .card-description {
+    font-size: 1em;
+    margin:5%;
+}
+.pleroma-comment .card-image {
+    width: 100%;
+    height: auto;
+}
+.pleroma-comment .card-link {
+    display: block;
+    text-align: center;
+    padding: 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    margin: 10px;
+}
+
+.pleroma-comment  .chart {
+/*     border:1px solid red; */
+    display: flex;
+    flex-direction: column;
+    width: 45%;
+    white-space:normal;
+    overflow:hidden;
+}
+
+.pleroma-comment .bar-container {
+    display: flex; 
+    align-items: center;
+    margin: 1% 0;
+}
+
+.pleroma-comment .bar {
+    padding-top: 0.5em;
+    padding-bottom:0.5em;
+    padding-left:1em;
+    margin-right:1em;
+    white-space: nowrap; /* Prevent text wrapping for the bar width */
+}
+
+.pleroma-comment .bar-text {
+    word-wrap: break-word; /* Allow word wrap */
+    overflow-wrap: break-word;
+    white-space: normal; /* Allow normal wrapping */
+}
+
+/* colors  */
+
+.pleroma-comment  .bar {
+    background-color: #8da5aa;
+}
+
+/*.pleroma-comment .card-link {
+    background-color: #36dcff;
+    color: white;
+}
+.pleroma-comment .card-link:hover {
+    background-color: #8da5aa;
+}*/

pleroma-comments.lua

@@ -136,8 +136,13 @@ function write_comments(pleroma_posts, instance, show_avatars)
         end
         local bar_chart = {"<div class=\"chart\">"}
         local bar_template = [[
-            <div class="bar" style="width: $pct$%;">
+            <div class="bar-container">
-                $label$
+                <div class="bar" style="width: $pct$%;">
+                    $pct$%
+                </div>
+                <div class="bar-text">
+                    $label$
+                </div>
             </div>
         ]]
         local total_votes = math.floor(poll["votes_count"])
@@ -146,7 +151,7 @@ function write_comments(pleroma_posts, instance, show_avatars)
             local percentage = (v["votes_count"]/total_votes) * 100
             local rounded = math.floor(0.5 + percentage)
             local vars = {
-                label = rounded .. "% " .. v["title"],
+                label = v["title"],
                 pct = rounded
             }
             local bar = bar_template:gsub("%$(%w+)%$", vars)