fix icon overflowing text in card component

fixes #424

Author: lovasoa

CHANGELOG.md

@@ -17,6 +17,9 @@
    - ![compact list screenshot](https://github.com/lovasoa/SQLpage/assets/552629/41302807-c6e4-40a0-9486-bfd0ceae1537)
  - Add property `narrow` to the [button](https://sql.ophir.dev/documentation.sql?component=button#component) component to make the button narrower. Ideal for buttons with icons.
    - ![icon buttons](https://github.com/lovasoa/SQLpage/assets/552629/7fcc049e-6012-40c1-a8ee-714ce70a8763)
+ - new `tooltip` property in the datagrid component.
+ - datagrids are now slightly more compact, with less padding and less space taken by each item.
+ - fix a bug in the [card](https://sql.ophir.dev/documentation.sql?component=card#component) component where the icon would sometimes overflow the card's text content.
 
 ## 0.23.0 (2024-06-09)
 

examples/official-site/sqlpage/migrations/31_card_docs_update.sql

@@ -51,6 +51,11 @@ INSERT INTO example(component, description, properties) VALUES
             {"title": "Download as spreadsheet", "link": "?component=csv#component", "description": "Using the CSV component, you can download your data as a spreadsheet.", "icon":"file-plus", "color": "green", "footer_md": "SQLPage can both [read](?component=form#component) and [write](?component=csv#component) **CSV** files."},
             {"title": "Custom components", "link": "/custom_components.sql", "description": "If you know some HTML, you can create your own components for your application.", "icon":"code", "color": "orange", "footer_md": "You can look at the [source of the official components](https://github.com/lovasoa/SQLpage/tree/main/sqlpage/templates) for inspiration."}
     ]')),
+    ('card', 'Short information notices', 
+        json('[
+            {"component": "card"},
+            {"description_md": "This post is also available in [german](?lang=de).", "active": true, "icon": "language"}
+        ]')),
     ('card', 'A gallery of images.',
         json('[
             {"component":"card", "title":"My favorite animals in pictures", "columns": 3},

sqlpage/templates/card.handlebars

@@ -39,7 +39,7 @@
                 {{/if}}
                 <div class="card-body">
                     {{#if title}}<h2 class="card-title fs-3 me-3">{{title}}</h2>{{/if}}
-                    <div class="card-content remove-bottom-margin">
+                    <div class="card-content remove-bottom-margin{{#if (and icon (not title))}} pe-4{{/if}}">
                         {{~description~}}
                         {{~#if description_md~}}
                             {{{markdown description_md}}}