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);
@@ -10262,18 +10265,18 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
 }
 
 .contenidor {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  padding: 5rem 0;
-  border-bottom: 1px solid var(--numerus--color--black);
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    padding: 5rem 0;
+    border-bottom: 1px solid var(--numerus--color--black);
 }
 
 .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 {
@@ -10281,61 +10284,69 @@ grid-row-gap: 0px;
 }
 
 .caixa-1 {
-  grid-area: 1 / 1 / 2 / 3;
-  background: var(--numerus--color--yellow);
-  font-size: calc(16px + 5vw);
-  display: grid;
-  align-content: center;
-  justify-content: start;
-  border-bottom: 1px solid var(--numerus--color--black);
+    grid-area: 1 / 1 / 2 / 3;
+    background: var(--numerus--color--yellow);
+    font-size: calc(16px + 5vw);
+    display: grid;
+    align-content: center;
+    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);
+    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);
+    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);
+    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);
- }
+    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);
+    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);
-  font-size: calc(16px + 5vw);
-  display: grid;
-  align-content: center;
-  justify-content: end;
-  border-bottom: 1px solid var(--numerus--color--black);
+    grid-area: 2 / 5 / 3 / 7;
+    background: var(--numerus--color--green);
+    font-size: calc(16px + 5vw);
+    display: grid;
+    align-content: center;
+    justify-content: end;
+    border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-8 {
-  grid-area: 3 / 1 / 4 / 2;
-  background: var(--numerus--color--black);
-  color: var(--numerus--color--white);
-  padding: 1rem;
-  border-bottom: 1px solid var(--numerus--color--black);
+    grid-area: 3 / 1 / 4 / 2;
+    background: var(--numerus--color--black);
+    color: var(--numerus--color--white);
+    padding: 1rem;
+    border-bottom: 1px solid var(--numerus--color--black);
 }
+
 .caixa-9 {
-  grid-area: 3 / 2 / 4 / 7;
-  font-size: calc(16px + 5vw);
-  display: grid;
-  align-content: center;
-  justify-content: end;
-  border-bottom: 1px solid var(--numerus--color--black);
+    grid-area: 3 / 2 / 4 / 7;
+    font-size: calc(16px + 5vw);
+    display: grid;
+    align-content: center;
+    justify-content: end;
+    border-bottom: 1px solid var(--numerus--color--black);
 }
 
 
@@ -10343,47 +10354,57 @@ grid-row-gap: 0px;
 
 @media screen and (max-width: 992px) {
 
-  .contenidor {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .graella {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(5, 1fr);
-      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*/
-  }
+    .contenidor {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .graella {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(5, 1fr);
+        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 }}"