Hide unnecessary padding when captcha is unused

[ghost]

Right now there's a constant 80+20px space (#t-cnt + #t-slider) adding unnecessary space at the bottom of the QR. Normally I would just add a rule in custom CSS and call it a day but the current container behavior breaks every possible rule that can solve this issue.

The container has no width value at first but it receives one when you click on Get captcha and the foreground element gets populated with an image. Thing is the width value stays there when you post something or the captcha expires. Would it be possible to clean the width value in the container when something gets posted or captcha expires aka foreground loses background-image?

https://user-images.githubusercontent.com/63500907/124520230-163c4100-ddec-11eb-84e7-cadbac81cac9.mp4

[ghost]

I made some custom CSS rules that should autohide the captcha container empty space:

/* Compact QR Captcha */
#t-cnt {
  /* Collapses height to 0 when there's no captcha */
  height: auto !important;
}
#t-fg[style*="image"] {
  /* Increases #t-cnt height back to 80px when captcha is up */
  position: relative !important;
  height: 80px !important;
}
#t-slider[style*="hidden"]{
  /* Hides slider when it's not used */
  display: none;
}
#t-msg:not(:empty) {
  /* Prevents overlapping of the message on other elements */
  position: static !important;
}

[toshinoo]

that's cool, would you mind if I included it in my script? I will credit you of course

[ghost]

Sure, go ahead. It's just a bunch of CSS rules after all