From c692d52bb4d2482587e3a981efe1df87f69b1ffb Mon Sep 17 00:00:00 2001
From: Manzoor Sofi <97725740+manzoorsofi@users.noreply.github.com>
Date: Thu, 13 Nov 2025 00:50:10 +0530
Subject: [PATCH] fix: align Duration picker layout and background color in
 child tables (#34661)

Co-authored-by: barredterra <14891507+barredterra@users.noreply.github.com>
---
 frappe/public/scss/common/controls.scss | 20 ++++++++++++++++++--
 frappe/public/scss/common/form.scss     |  1 +
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index d0b959b453..d07717a487 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -424,7 +424,7 @@ textarea.form-control {
 /* duration control */
 
 .duration-picker {
-	position: absolute;
+	position: fixed;
 	z-index: 999;
 	border-radius: var(--border-radius);
 	box-shadow: var(--shadow-sm);
@@ -470,7 +470,7 @@ textarea.form-control {
 		width: 55px;
 		border: none;
 		color: var(--text-color);
-		background-color: var(--control-bg);
+		background-color: var(--bg-gray);
 		border-radius: var(--border-radius);
 		padding: 4px 8px;
 	}
@@ -486,6 +486,22 @@ textarea.form-control {
 	.picker-row {
 		display: flex;
 		margin: var(--margin-sm);
+
+		.col {
+			&:last-child {
+				.grid-row & {
+					// remove flex and justify content added by grid context
+					display: block;
+					justify-content: initial;
+				}
+			}
+
+			.grid-row & {
+				// remove border and padding added by grid context
+				border-right: none;
+				padding: unset;
+			}
+		}
 	}
 }
 
diff --git a/frappe/public/scss/common/form.scss b/frappe/public/scss/common/form.scss
index f0403e5c9e..6f250faaa8 100644
--- a/frappe/public/scss/common/form.scss
+++ b/frappe/public/scss/common/form.scss
@@ -15,6 +15,7 @@
 	.for-description {
 		@include get_textstyle("sm", "regular");
 	}
+
 	min-height: var(--input-height);
 	border-radius: var(--border-radius-sm);
 	padding: 4px 8px;