chore: various frontend changes (#37973)

web_src/css/modules/animations.css

@@ -101,13 +101,6 @@ code.language-math.is-loading::after {
   animation: pulse-1p5 200ms linear;
 }
 
-.ui.modal,
-.ui.dimmer.transition {
-  animation-name: fadein;
-  animation-duration: 100ms;
-  animation-timing-function: ease-in-out;
-}
-
 .rotate-clockwise {
   animation: rotate-clockwise-keyframes 1s linear infinite;
 }

web_src/css/modules/message.css

@@ -31,6 +31,11 @@ details.ui.message:not(:has(pre)) summary {
   cursor: text;
 }
 
+.ui.message.flash-message pre {
+  white-space: pre-line;
+  margin: 0;
+}
+
 .ui.message:first-child {
   margin-top: 0;
 }

web_src/css/modules/transition.css

@@ -0,0 +1,24 @@
+/* styles for Fomantic transition (toggle): dimmer, modal, dropdown menu */
+
+/* this is the only place using "hidden" and "visible" classes, it can safely work with tailwind without prefix in the future */
+.ui.modal.transition.hidden,
+.ui.dropdown > .menu.transition.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.ui.modal.transition.visible,
+.ui.dropdown > .menu.transition.visible {
+  display: block;
+  visibility: visible;
+}
+
+/* dimmer uses "active" but not "hidden/visible" classes, no special classes for it here */
+
+/* only modal and dimmer need animation, dropdown menu doesn't */
+.ui.modal.transition,
+.ui.dimmer.transition {
+  animation-name: fadein;
+  animation-duration: 100ms;
+  animation-timing-function: ease-in-out;
+}