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);
@@ -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/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 }}"