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;