Merge pull request #6702 from frappe/mergify/bp/master/pr-6701

fix(deploy-ui): Make page responsive (backport #6701)

Author: siduck

dashboard/src/components/benches/pipeline/Details.vue

@@ -168,7 +168,7 @@ const fetchSetErrs = () => {
 
 // pipeline.doc exists if cache exists
 // if cache exists then onSuccess wont run so fetch errs!
-if(pipeline?.doc?.status == 'Failure') fetchSetErrs()
+if (pipeline?.doc?.status == 'Failure') fetchSetErrs()
 
 const wired = reactive(new Set<string>())
 const builds = ref<Record<string, any>>({})
@@ -385,7 +385,7 @@ const appVersions = () => {
 			dc_name: deploy.name,
 			group: deploy.group,
 			status: deploy.status,
-      isPipeline: !props.deployview,
+			isPipeline: !props.deployview,
 		}),
 	)
 }
@@ -433,7 +433,7 @@ const stopBuild = () => {
 	/>
 
 	<main
-		class="flex flex-col gap-4 py-3 px-5 w-full h-[calc(100dvh-7rem)] mt-1.5"
+		class="flex flex-col gap-4 p-3 md:px-5 w-full md:h-[calc(100dvh-7rem)] md:mt-1.5"
 		v-else
 	>
 		<!-- header -->
@@ -483,30 +483,31 @@ const stopBuild = () => {
 
 		<!-- status cards -->
 		<section
-			class="grid grid-cols-4 gap-3 [&_b]:text-ink-gray-4 [&_b]:font-normal text-sm -mt-1"
+			class="flex flex-wrap md:grid grid-cols-4 gap-3 [&_b]:text-ink-gray-4 [&_b]:font-normal text-sm -mt-1
+      *:p-2 *:md:p-4 *:border"
 		>
-			<div class="flex flex-col gap-2 border p-4 rounded ">
+			<div class="flex flex-col gap-2 rounded ">
 				<b> Created by </b>
 				<span class="text-ink-gray-9"
 					>{{ deployview ?  builds[activeBuildId]?.doc?.owner : pipeline?.doc?.owner }}
 				</span>
 			</div>
 
-			<div class="flex flex-col gap-2 border p-4 rounded">
+			<div class="flex flex-col gap-2 rounded">
 				<b> Start </b>
 				<span>
 					{{ date(deployview ?  builds[activeBuildId]?.doc?.build_start : pipeline?.doc?.steps?.start) || '-' }}
 				</span>
 			</div>
 
-			<div class="flex flex-col gap-2 border p-4 rounded">
+			<div class="flex flex-col gap-2 rounded">
 				<b> End </b>
 				<span>
 					{{ date(deployview ?  builds[activeBuildId]?.doc?.build_end : pipeline?.doc?.steps?.end) || '-' }}
 				</span>
 			</div>
 
-			<div class="flex flex-col gap-2 border p-4 rounded">
+			<div class="flex flex-col gap-2 rounded">
 				<b> Duration </b>
 				<span>
 					{{ deployview ? duration( builds[activeBuildId]?.doc?.build_duration) || '-' : secsToDuration(pipeline?.doc?.steps?.duration) || '-' }}
@@ -516,13 +517,13 @@ const stopBuild = () => {
 
 		<!-- deploy steps + output -->
 		<div
-			class="flex rounded border p-3 pt-1 flex-1 min-h-0"
+			class="flex flex-col md:flex-row rounded border p-3 pt-1 flex-1 min-h-0"
 			:class='output.opened? "": "!pr-0" '
 			ref="stepsEl"
 		>
 			<Scrollbar
-				class="px-0.5 pr-3 transition-all duration-300 shrink-0"
-				:class="output.opened ? 'w-[30rem]' : 'w-full'"
+				class="px-0.5 md:pr-3 transition-all duration-300 shrink-0"
+				:class="output.opened ? 'md:w-[30rem]' : 'w-full'"
 			>
 				<Tabs
 					class="w-full sticky top-0 z-10 bg-surface-white mb-2"

dashboard/src/components/benches/pipeline/Loader.vue

@@ -1,14 +1,14 @@
 <template>
-	<div class="sk-fade flex flex-col gap-4 py-3 px-5 w-full mt-1.5">
+	<div class="sk-fade flex flex-col gap-4 p-3 md:px-5 w-full md:mt-1.5">
 		<div class="flex gap-2 items-center">
 			<div class="sk size-7" />
 			<div class="sk h-7 w-44" />
 			<div class="sk h-7 w-16 mr-auto" />
-			<div class="sk h-7 w-20" />
+			<div class="sk h-7 w-20 hidden md:block" />
 			<div class="sk size-7" />
 		</div>
 
-		<section class="grid grid-cols-4 gap-3">
+		<section class="grid grid-cols-2 md:grid-cols-4 gap-3">
 			<div
 				v-for="i in 4"
 				:key="i"
@@ -20,10 +20,9 @@
 		</section>
 
 		<div
-			class="flex rounded border p-3 pt-0.5 gap-3 min-h-0"
-			style="height: calc(100dvh - 18rem)"
+			class="flex flex-col md:flex-row rounded border p-3 pt-0.5 gap-3 min-h-0 md:h-[calc(100dvh-18rem)]"
 		>
-			<div class="w-[30rem] shrink-0 flex flex-col py-3">
+			<div class="w-full md:w-[30rem] shrink-0 flex flex-col py-3">
 				<div class="flex gap-4 pb-3 mb-1 border-b">
 					<div class="sk h-5 w-16" />
 					<div class="sk h-5 w-16" />
@@ -48,7 +47,7 @@
 			</div>
 
 			<div
-				class="flex-1 bg-surface-gray-1 dark:bg-surface-cards rounded p-3 flex flex-col gap-3 mt-1"
+				class="flex-1 bg-surface-gray-1 dark:bg-surface-cards rounded p-3 hidden md:flex flex-col gap-3 mt-1"
 			>
 				<div class="flex items-center gap-2 pb-2 border-b">
 					<div class="sk h-4 w-12" />