Always show pipeline step list (#3114)

Closes #1845 

Will always show the pipeline step list for failed pipelines, declined
pipelines and blocked pipelines.

Example screenshot of a failed pipeline:


![image](https://github.com/woodpecker-ci/woodpecker/assets/32853499/c43618f2-b49e-4b42-908c-95c5f641ba4a)

web/src/components/repo/pipeline/PipelineStepList.vue

@@ -50,9 +50,9 @@
       </div>
     </div>
 
-    <div v-if="pipeline.workflows === undefined || pipeline.workflows.length === 0" class="m-auto mt-4">
+    <Panel v-if="pipeline.workflows === undefined || pipeline.workflows.length === 0">
       <span>{{ $t('repo.pipeline.no_pipeline_steps') }}</span>
-    </div>
+    </Panel>
 
     <div class="flex-grow min-h-0 w-full relative">
       <div class="absolute top-0 left-0 right-0 h-full flex flex-col md:overflow-y-auto gap-y-2">
@@ -125,6 +125,7 @@ import { ref, toRef } from 'vue';
 
 import Badge from '~/components/atomic/Badge.vue';
 import Icon from '~/components/atomic/Icon.vue';
+import Panel from '~/components/layout/Panel.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import PipelineStepDuration from '~/components/repo/pipeline/PipelineStepDuration.vue';
 import usePipeline from '~/compositions/usePipeline';

web/src/views/repo/pipeline/Pipeline.vue

@@ -2,7 +2,6 @@
   <Container full-width class="flex flex-col flex-grow-0 md:flex-grow md:min-h-xs md:px-4">
     <div class="flex w-full min-h-0 flex-grow gap-4 flex-wrap-reverse md:flex-nowrap">
       <PipelineStepList
-        v-if="pipeline?.workflows && pipeline?.workflows?.length > 0"
         v-model:selected-step-id="selectedStepId"
         :class="{ 'hidden md:flex': pipeline.status === 'blocked' }"
         :pipeline="pipeline"