From 82e83d3076dd8a2d1f84eb0414342ba42a2fc4c9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 26 Mar 2024 08:56:44 +0100
Subject: [PATCH] Fix alignment in actions right view (#29979)

Fixes: https://github.com/go-gitea/gitea/issues/29974, Regression from
https://github.com/go-gitea/gitea/pull/29640.

Depending on the number of steps on the left side, the right side will
vertically expand. Collapse it with `align-self`.

<img width="1308" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/9bcede9c-d869-4f3f-8a10-026c74c03f71">

(cherry picked from commit a4455d313e2c129dc9734292035b89339577174d)
---
 web_src/js/components/RepoActionView.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 8174189f45..7e44370e1c 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -637,6 +637,8 @@ export function initRepositoryActionView() {
   flex-direction: column;
   border: 1px solid var(--color-console-border);
   border-radius: var(--border-radius);
+  background: var(--color-console-bg);
+  align-self: flex-start;
 }
 
 /* begin fomantic button overrides */
@@ -696,10 +698,8 @@ export function initRepositoryActionView() {
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
-  background-color: var(--color-console-bg);
   position: sticky;
   top: 0;
-  border-radius: var(--border-radius);
   height: 60px;
   z-index: 1;
 }
@@ -720,7 +720,6 @@ export function initRepositoryActionView() {
 }
 
 .job-step-container {
-  background-color: var(--color-console-bg);
   max-height: 100%;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   border-top: 1px solid var(--color-console-border);