qr-mask/style.css

body {
  margin: 0;
  padding: 0.5rem;
}

body > div {
  width: fit-content;
  margin: auto;
  max-width: calc(100vw - 0.5rem * 2);
}

#options {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}

select, input, button {
  width: fit-content;
  max-width: 100%;
  font-size: 1rem;
}

input[type=number] {
  width: calc(4rem + 0.125rem * 2);
}

label {
  display: flex;
  flex-direction: row;
  column-gap: 0.25rem;
}

label#width-wrapper > button {
  padding: 0.0625rem 0.25rem;
  width: calc(1rem + 0.25rem * 3);
}

label > span:nth-child(1) {
  width: 5rem;
  text-align: right;
}

canvas {
  margin-top: 0.5rem;
  border: 2px solid #555;
}