Implement CSS-only input toggling, refactor related forms

UX/Translation changes:

- new teams: remove redundant tooltips that don't add meaningful information
  - move general information to table fieldset
- new teams: rename "general" to "custom" access for clarity
- new teams: show labels beside options on mobile

Accessibility:

- semantic form elements allow easier navigation (fieldset, mostly)
- improve better labelling of new teams table
- fix accessibility scan issues
- TODO: the parts that "disable" form elements were not yet touched and
  are not really accessible to screenreaders

Technical:

- replace two JavaScript solutions with one CSS standard
- implement a simpler grid (.simple-grid)
- simplify markup
- remove some webhook settings specific CSS

Testing:

- check more form content for accessibility issues
- but exclude tooltips from the scan :(
- reuse existing form tests from previous PR

web_src/css/form.css

@@ -12,7 +12,12 @@ fieldset label {
   display: block;
 }
 
-form fieldset label .help {
+fieldset label:has(input[type="text"]),
+fieldset label:has(input[type="number"]) {
+  font-weight: var(--font-weight-medium);
+}
+
+fieldset .help {
   font-weight: var(--font-weight-normal);
   display: block !important; /* overrides another rule in this file, remove when obsolete */
 }
@@ -23,9 +28,22 @@ fieldset input[type="radio"] {
   vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */
 }
 
-fieldset label:has(input[type="text"]),
-fieldset label:has(input[type="number"]) {
-  font-weight: var(--font-weight-medium);
+@media (min-width: 768px) {
+  .optionmatrix input[type="radio"] {
+    margin: 0;
+  }
+
+  /* center columns except first */
+  .optionmatrix td + td, .optionmatrix th + th {
+    min-width: 10em;
+    text-align: center !important; /* overrides table.css "inherit" rule */
+  }
+}
+
+/* if an element with class "hide-unless-checked" follows a label
+ * that has no checked input, it will be hidden.*/
+label:not(:has(input:checked)) + .hide-unless-checked {
+  display: none;
 }
 
 .ui.input textarea,
@@ -495,14 +513,6 @@ textarea:focus,
   min-width: 14em; /* matches the default min width */
 }
 
-.new.webhook form .help {
-  margin-left: 25px;
-}
-
-.new.webhook .events.fields .column {
-  padding-left: 40px;
-}
-
 .githook textarea {
   font-family: var(--fonts-monospace);
 }

web_src/css/modules/grid.css

@@ -1,3 +1,14 @@
+.simple-grid {
+  display: grid;
+  gap: 1em 2em;
+}
+
+@media (min-width: 30em) {
+  .simple-grid.grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 /* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
    unused rules here after refactoring, please remove them. */
 

web_src/css/repo.css

@@ -1805,16 +1805,6 @@ td .commit-summary {
   font-style: italic;
 }
 
-.repository.settings.webhook .events .column {
-  padding-bottom: 0;
-}
-
-.repository.settings.webhook .events .help {
-  font-size: 13px;
-  margin-left: 26px;
-  padding-top: 0;
-}
-
 .repository .ui.attached.isSigned.isWarning {
   border-left: 1px solid var(--color-error-border);
   border-right: 1px solid var(--color-error-border);