Use vertical layout for multiple code expander buttons (#31122) (#31152)

Backport #31122 by @silverwind

Fixes: https://github.com/go-gitea/gitea/issues/31068

- Now it only does a single call to `GetExpandDirection` per line
instead of multiples.
- Exposed `data-expand-direction` to frontend so it can correctly size
the buttons (it's a pain to do in tables).

<img width="142" alt="Screenshot 2024-05-27 at 20 44 56"
src="8b0b45a6-8e50-4081-8822-5e0775d8d941">
<img width="142" alt="Screenshot 2024-05-27 at 20 44 51"
src="b7ba2c57-8f55-4e9f-9606-c96d16b77892">
<img width="132" alt="Screenshot 2024-05-27 at 20 44 46"
src="0e838fb8-5e8c-4250-9843-a68b88d5418b">
<img width="80" alt="Screenshot 2024-05-27 at 20 44 33"
src="da6c7f83-c160-4389-8ab2-889d0568cbe8">
<img width="80" alt="Screenshot 2024-05-27 at 20 44 26"
src="cdb490b2-5040-484a-92e5-46fc5e37c199">
<img width="78" alt="Screenshot 2024-05-27 at 20 44 20"
src="d2978ab0-764e-41ff-922c-25f8fe749f28">

Would backport as trivial enhancement.

Co-authored-by: silverwind <me@silverwind.io>

web_src/css/review.css

@@ -164,6 +164,11 @@
   flex: 1;
 }
 
+/* expand direction 3 is both ways with two buttons */
+.code-expander-buttons[data-expand-direction="3"] .code-expander-button {
+  height: 18px;
+}
+
 .code-expander-button:hover {
   background: var(--color-primary);
   color: var(--color-primary-contrast);