Some visual html/css tweaks.

frontends/bringrss_flask/static/css/bringrss.css

@@ -13,3 +13,8 @@ p:last-child
 {
     margin-bottom: 0;
 }
+
+.navigation_link:hover
+{
+    background-color: var(--color_secondary);
+}

frontends/bringrss_flask/static/css/common.css

@@ -29,7 +29,7 @@ getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() =
 
 html
 {
-    height: 100vh;
+    min-height: 100vh;
     box-sizing: border-box;
     color: var(--color_text_normal);
 }
@@ -48,7 +48,7 @@ body
         "content_body" 1fr
         /1fr;
 
-    min-height: 100%;
+    min-height: 100vh;
     margin: 0;
     padding: 8px;
     grid-row-gap: 8px;

frontends/bringrss_flask/templates/feed_settings.html

@@ -53,16 +53,11 @@ h1:first-child
     width: 3em;
     text-align: right;
 }
-.group
-{
-    border:  1px solid var(--color_highlight);
-    border-radius: 4px;
-    padding: 4px;
-}
 #filters_group h2:first-child,
 .group h2:first-child
 {
     margin-top: 0;
+    margin-bottom: 0;
 }
 
 #filters .filter
@@ -124,9 +119,10 @@ h1:first-child
             <input id="set_icon_input" type="file"/>
             <button id="set_icon_button" class="button_with_spinner" data-spinner-text="⌛" onclick="return set_icon_form(event)">Set icon</button>
         </div>
+    </div>
 
     {% set autorefresh_group_hidden = '' if feed.rss_url else 'hidden' %}
-        <div id="autorefresh_group" class="group {{autorefresh_group_hidden}}">
+    <div id="autorefresh_group" class="group panel {{autorefresh_group_hidden}}">
         {% set checked = 'checked' if feed.autorefresh_interval > 0 else '' %}
         <span>
         <label><input type="checkbox" {{checked}} onchange="return set_autorefresh_enabled_form(event);"/> Automatically refresh this feed regularly.</label>
@@ -161,7 +157,7 @@ h1:first-child
         {% endif %}
     </div>
 
-        <div class="group">
+    <div class="group panel">
         {% set checked = 'checked' if feed.refresh_with_others else '' %}
         <span>
             <label><input type="checkbox" {{checked}} onchange="return set_refresh_with_others_form(event);"/> Refresh this feed and its children when I refresh its parent or press the "Refresh all" button.</label>
@@ -170,7 +166,7 @@ h1:first-child
         <p>If disabled, this feed will only be refreshed when you click its own refresh button, or when its autorefresh timer is ready.</p>
     </div>
 
-        <div id="isolate_guids_group" class="group">
+    <div id="isolate_guids_group" class="group panel">
         {% set checked = 'checked' if feed.isolate_guids else '' %}
         <span>
         <label><input type="checkbox" {{checked}} onchange="return set_isolate_guids_form(event);"/> Isolate RSS GUIDs from other feeds.</label>
@@ -181,7 +177,7 @@ h1:first-child
         <p>If you have two feeds that may produce the same items (e.g. two newspaper category feeds, and a news article belongs to both categories), this setting will control whether the news item appears in both feeds or just the one that got it first.</p>
     </div>
 
-        <div id="filters_group" class="group">
+    <div id="filters_group" class="group panel">
         <h2>Filters</h2>
         <p>Filters will execute in the order they are listed here:</p>
         <div id="filter_rearrange_guideline"></div>
@@ -216,20 +212,20 @@ h1:first-child
     </div>
 
     {% set http_headers_hidden = '' if feed.rss_url else 'hidden' %}
-        <div id="http_headers_group" class="group {{http_headers_hidden}}">
+    <div id="http_headers_group" class="group panel {{http_headers_hidden}}">
+        <h2>HTTP Headers</h2>
         <p>If you need to define additional HTTP headers which will be sent on every refresh request for this feed, you can add them below. Write one header per line like <code>Key: value</code>, e.g. <code>Host: example.com</code></p>
         <textarea id="set_http_headers_input" placeholder="HTTP headers" data-bind-ctrl-enter-to-button="set_http_headers_button">{{feed.http_headers|http_headers_dict_to_lines}}</textarea>
         <button id="set_http_headers_button" class="button_with_spinner" data-spinner-text="⌛" onclick="return set_http_headers_form(event);">Set HTTP headers</button>
     </div>
 
-        <div>
+    <div class="panel">
         <button
         class="red_button button_with_confirm"
         data-prompt="Delete feed and all associated news?"
         data-onclick="return delete_feed_form(event);"
         >Delete feed</button>
     </div>
-    </div>
 </div>
 </body>
 

frontends/bringrss_flask/templates/filters.html

@@ -15,6 +15,10 @@
     <script src="/static/js/spinners.js"></script>
 
 <style>
+html
+{
+    height: 100vh;
+}
 h2:first-child
 {
     margin-top: 0;
@@ -55,6 +59,10 @@ h2:first-child
     flex-direction: column;
     gap: 8px;
 }
+#left ::-webkit-scrollbar-track
+{
+    background-color: pink;
+}
 .filter textarea
 {
     min-width: 300px;
@@ -79,6 +87,7 @@ h2:first-child
     border-radius: 4px;
     padding: 4px;
     overflow-x: auto;
+    white-space: pre-line;
 }
 </style>
 </head>

frontends/bringrss_flask/templates/header.html

@@ -1,8 +1,8 @@
 {% macro make_header(site, request) %}
 <nav id="header">
-    <a class="header_element" href="/">BringRSS</a>
+    <a class="header_element navigation_link" href="/">BringRSS</a>
-    <a class="header_element" href="/filters">Filters</a>
+    <a class="header_element navigation_link" href="/filters">Filters</a>
-    <a class="header_element" href="/about">About</a>
+    <a class="header_element navigation_link" href="/about">About</a>
     {% if site.demo_mode %}
     <span class="demo_mode_alert" title="The site is in demo mode. No changes you make will be saved.">(demo mode)</span>
     {% endif %}

frontends/bringrss_flask/templates/root.html

@@ -18,6 +18,10 @@
     <script src="/static/js/dompurify.js"></script>
 
 <style>
+html
+{
+    height: 100vh;
+}
 body
 {
     font-family: sans-serif;