Add nowrap to toggle’s labels

Sometimes, if the space is tight, the browser may break the radio button
and the single-word label for the toggle, which looks very weird.

I did not set nowrap to all radio button because the no wrap would
prevent long labels to break, and i am not sure if there is any such
radio option.  I know that for the toggle there is not any.

web/static/numerus.css

@@ -966,6 +966,10 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
     background-color: var(--numerus--header--background-color);
 }
 
+.filters .toggle label {
+    white-space: nowrap;
+}
+
 /* Dashboard */
 #dashboard-filters {
     display: flex;
@@ -10241,7 +10245,6 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 /* web */
 
 
-
 .web {
     margin: 3rem;
     background-color: var(--numerus--header--background-color);
@@ -10269,11 +10272,11 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 }
 
 .graella {
-display: grid;
-grid-template-columns: repeat(6, 1fr);
-grid-template-rows: repeat(3, 1fr);
-grid-column-gap: 0px;
-grid-row-gap: 0px;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
 }
 
 .caixa {
@@ -10289,30 +10292,36 @@ grid-row-gap: 0px;
     justify-content: start;
     border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-2 {
     grid-area: 1 / 3 / 2 / 6;
     padding: 1rem;
     border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-3 {
     grid-area: 1 / 6 / 2 / 7;
     background: var(--numerus--color--white);
     border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-4 {
     grid-area: 2 / 1 / 3 / 3;
     border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-5 {
     grid-area: 2 / 3 / 3 / 4;
     background: var(--numerus--color--red);
     padding: 1rem;
     border-bottom: 1px solid var(--numerus--color--black);
- }
+}
+
 .caixa-6 {
     grid-area: 2 / 4 / 3 / 5;
     border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-7 {
     grid-area: 2 / 5 / 3 / 7;
     background: var(--numerus--color--green);
@@ -10322,6 +10331,7 @@ grid-row-gap: 0px;
     justify-content: end;
     border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-8 {
     grid-area: 3 / 1 / 4 / 2;
     background: var(--numerus--color--black);
@@ -10329,6 +10339,7 @@ grid-row-gap: 0px;
     padding: 1rem;
     border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-9 {
     grid-area: 3 / 2 / 4 / 7;
     font-size: calc(16px + 5vw);
@@ -10347,6 +10358,7 @@ grid-row-gap: 0px;
         display: grid;
         grid-template-columns: repeat(1, 1fr);
     }
+
     .graella {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
@@ -10354,33 +10366,42 @@ grid-row-gap: 0px;
         grid-column-gap: 0px;
         grid-row-gap: 0px;
     }
+
     .caixa-1 {
         grid-area: 1 / 1 / 2 / 2; /* posició 1*/
     }
+
     .caixa-2 {
         grid-area: 1 / 2 / 2 / 3; /* posició 2*/
     }
+
     .caixa-3 {
         grid-area: 2 / 1 / 3 / 2; /* posició 3*/
     }
+
     .caixa-4 {
         grid-area: 5 / 1 / 6 / 2; /* posició 7*/
         display: none;
     }
+
     .caixa-5 {
         grid-area: 2 / 2 / 3 / 3; /*posició 4*/
     }
+
     .caixa-6 {
         grid-area: 5 / 2 / 6 / 3; /* posició 8*/
         display: none;
     }
+
     .caixa-7 {
         grid-area: 3 / 1 / 4 / 2; /* posició 5*/
         justify-content: start;
     }
+
     .caixa-8 {
         grid-area: 3 / 2 / 4 / 3; /* posició 6*/
     }
+
     .caixa-9 {
         grid-area: 4 / 1 / 5 / 3; /* posició 9*/
     }

web/static/numerus.js

@@ -712,7 +712,7 @@ htmx.on('closeModal', () => {
 });
 
 htmx.on(document, 'alpine:init', () => {
-    document.body.classList.remove('show-filters');
+    document.body.classList.remove('filters-visible');
    
     Alpine.data('snackbar', () => ({
         show: false, toast: "", toasts: [], timeoutId: null, init() {

web/template/app.gohtml

@@ -9,7 +9,7 @@
 		<script type="module" src="/static/numerus.js"></script>
         <script defer src="/static/alpinejs@3.12.0.min.js"></script>
 	</head>
-	<body class="show-filters">
+	<body class="filters-visible">
 		<header>
 			<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
 			<details id="profile-menu" class="menu">

web/template/form.gohtml

@@ -110,7 +110,7 @@
 
 {{ define "toggle-field" -}}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ToggleField*/ -}}
-    <fieldset id="{{ .Name}}-field" class="input{{ if .Errors }} has-errors{{ end }}" is="numerus-toggle">
+    <fieldset id="{{ .Name}}-field" class="input toggle{{ if .Errors }} has-errors{{ end }}" is="numerus-toggle">
         <legend>{{ .Label }}</legend>
         <label title="{{.FirstOption.Description }}">
             <input type="radio" name="{{ .Name }}" value="{{ .FirstOption.Value }}"