improve display of long page titles on small screens

closes #446

Author: lovasoa

CHANGELOG.md

@@ -25,7 +25,8 @@
    ```
  - New icons (see [tabler icons 3.10](https://tabler.io/changelog))
  - Updated apexcharts.js to [v3.50.0](https://github.com/apexcharts/apexcharts.js/releases/tag/v3.50.0)
-
+ - Improve truncation of long page titles
+   - ![screenshot long title](https://github.com/lovasoa/SQLpage/assets/552629/9859023e-c706-47b3-aa9e-1c613046fdfa)
 ## 0.24.0 (2024-06-23)
  - in the form component, searchable `select` fields now support more than 50 options. They used to display only the first 50 options. 
    - ![screenshot](https://github.com/lovasoa/SQLpage/assets/552629/40571d08-d058-45a8-83ef-91fa134f7ce2)

sqlpage/templates/shell.handlebars

@@ -66,17 +66,17 @@
     {{#if (or (or title (or icon image)) menu_item)}}
         <header id="sqlpage_header">
         <nav class="navbar navbar-expand-md navbar-light{{#if fixed_top_menu}} fixed-top{{/if}}">
-        <div class="container-fluid">
-            <a class="navbar-brand flex-grow-1 overflow-hidden" href="{{#if link}}{{link}}{{else}}/{{/if}}">
+        <div class="container-fluid gap-2">
+            <a class="navbar-brand" href="{{#if link}}{{link}}{{else}}/{{/if}}">
                 {{#if image}}
                     <img src="{{image}}" alt="{{title}}" width="32" height="32"
                         class="navbar-brand-image">
                 {{/if}}
                 {{#if icon}}
                     {{~icon_img icon~}}
                 {{/if}}
-                <h1 class="mb-0 w-0 fs-2">{{title}}</h1>
             </a>
+            <h1 class="mb-0 fs-2 text-truncate">{{title}}</h1>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false"
                 aria-label="Toggle navigation">