fix: make checkbox selectable via adjacent text

[tox2ik]

The the checkbox is not that easy to hit with a mouse. It's much easier to hit the whole description. HTML lets you do that, so why not use it?

The appearance of the font changed slightly but not significantly after the text was moved into a label because other css rules are affecting it now. I don't think it needs adjustment, but I'm not a UI guy or it looks good enough to me before and after.

The app builds.

$ make build
npm WARN deprecated noty@3.2.0-beta-deprecated: no longer supported

added 460 packages, and audited 461 packages in 2s

69 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> filebrowser-frontend@2.0.0 build
> vite build

vite v4.5.2 building for production...
<script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit"> in "/public/index.html" can't be bundled without type="module" attribute

[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css doesn't exist at build time, it will remain unchanged to be resolved at runtime

[{[ .StaticURL ]}]/custom.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
transforming (1) public/index.htmlBrowserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
✓ 188 modules transformed.
dist/assets/polyfills-legacy-5429e148.js.gz     55.56 kB
dist/assets/Editor-legacy-5c33137b.js          877.00 kB │ gzip: 237.64 kB
dist/assets/index-legacy-b5f54126.js         1,222.30 kB │ gzip: 374.19 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
dist/assets/medium-vietnamese-20d9ffa9.woff2        4.78 kB
dist/assets/normal-vietnamese-0af602fe.woff2        4.90 kB
dist/public/index.html                              6.69 kB │ gzip:   2.21 kB
dist/assets/medium-greek-1320e5dd.woff2             7.18 kB
dist/assets/bold-vietnamese-2096d809.woff2          7.20 kB
dist/assets/normal-greek-adc0b6a1.woff2             7.21 kB
dist/assets/bold-greek-20b1d460.woff2               9.49 kB
dist/assets/normal-cyrillic-fb0297aa.woff2         10.00 kB
dist/assets/medium-cyrillic-ef372eb9.woff2         10.06 kB
dist/assets/bold-cyrillic-c72dc79d.woff2           11.68 kB
dist/assets/medium-latin-ext-b4dae108.woff2        11.91 kB
dist/assets/normal-latin-ext-55f25e8b.woff2        12.01 kB
dist/assets/normal-latin-f7bbc846.woff2            14.58 kB
dist/assets/medium-latin-01a44f86.woff2            14.60 kB
dist/assets/bold-latin-ext-2d83ee25.woff2          15.14 kB
dist/assets/medium-cyrillic-ext-2d290fe6.woff2     15.29 kB
dist/assets/normal-cyrillic-ext-457c1e0d.woff2     15.83 kB
dist/assets/bold-cyrillic-ext-d2a7562e.woff2       17.18 kB
dist/assets/bold-latin-827bd1a8.woff2              18.12 kB
dist/assets/material-icons-8265f647.woff2         128.35 kB
dist/assets/material-icons-fd84f88b.woff          164.91 kB
dist/assets/index-14d65c81.css                     58.90 kB │ gzip:  16.89 kB
dist/assets/Editor-58ef5593.js                    871.31 kB │ gzip: 242.99 kB
dist/assets/index-1e0cd658.js                   1,145.68 kB │ gzip: 363.37 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 20.12s

Before and after:

The texts appears a little bit smaller when wrapped in a label and the collor is gray instead of black.

[kloon15]

Thats not how u do it tho, see MDN on how to use for attribute to do what u want.

[github-actions]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[tox2ik]

Very well, @kloon15. I've adjusted the PR to use id and for attributes instead of wrapping inputs with labels.

technically the way I did it before, is one of the ways to do it ;

• https://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

If you rely on MDN guidelines as the fallback or norm, there should be no harm in stating that in the read-before-you-create-a-PR thing that is already up on this repo.

[o1egl]

There 2 things:

1. It doesn't look good. The text falls below the checkbox

2. This PR brings inconsistency to the project. We should either change all the checkboxes, or keep everything as is.

[tox2ik]

Clicking the text to select the checkbox the text describes has been an accessibility and a usability UI feature in anything that's worth using for the last 25 years. If you two can't recognize this as maintainers / authors of a frontend app, then there is nothing I can do to help you out...

1st one said "move these elements around" because "some guide says so". ok sure, whatever.
2nd one says "its bad everywhere else in the app, so it can't be good here either".

Guys... learn to say "I want it like that" instead of "i don't like this"

It doesn't look good. The text falls below the checkbox

I can make it appear as it did before the requested change by @kloon15, with the text and the checkbox on one line. If you have some opinion on how that should look in CSS, feel free to share your opinion on that.

This PR brings inconsistency to the project. We should either change all the checkboxes, or keep everything as is.
"we should" is not a firm imperative statement. If you mean this must be done the same way with all the other checkbox inputs that appear throughout, then say as much: "Please change all the other checkbox inputs as well as these ones, if you want this PR to be accepted."

$ rg -e 'type..checkbox' -l
frontend\src\components\settings\UserForm.vue
frontend\src\css\styles.css
frontend\src\components\settings\Rules.vue
frontend\src\views\settings\Profile.vue
frontend\src\components\settings\Permissions.vue
frontend\src\views\settings\Global.vue

If you guys don't see the value in this and will continue to "fight" me on this, and you don't understand that this is an important usability feature (i.e. all our users are gods at FPS games and aiming at tiny checkboxes with a mouse is a fun activity for our users), then who am I to interfere?

So are we on the same page? I can change all the other checkboxes if that's what it takes.

[kloon15]

@tox2ik I see ur name reflects ur personality; we dont need ur hostility in here, u can take that attitude and make ur own project.
We are not being dictators we just want consistency in the project, i personally used label for elsewhere so lets stick to one style shall we.
Also u making a piss out of schemantics on wording when u already know what we meant, is just childish behavior.
If u cannot work with other ppl, u know where the door is.