From 665c97ab4c67a48bc1141bdd40fc6476b6620e42 Mon Sep 17 00:00:00 2001
From: vpolessky <valentine.polessky@drivenets.com>
Date: Tue, 19 May 2026 13:32:12 +0200
Subject: [PATCH] feat(design-system): align value in key-value-pair 
 [AR-54770]

---
 .../ds-key-value-pair.module.scss             |  5 ----
 .../ds-key-value-pair.stories.module.scss     | 30 +++++++++++--------
 .../ds-key-value-pair.stories.tsx             | 18 ++---------
 3 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.module.scss b/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.module.scss
index e9cbf0e41..e83efe712 100644
--- a/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.module.scss
+++ b/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.module.scss
@@ -35,7 +35,6 @@
 }
 
 .root[data-orientation='horizontal'] .valueContainer {
-	justify-items: end;
 	min-width: 0;
 }
 
@@ -50,10 +49,6 @@
 	overflow: hidden;
 }
 
-.root[data-orientation='horizontal'] .valueDisplay {
-	text-align: end;
-}
-
 .editorSlot {
 	display: none;
 	min-width: 0;
diff --git a/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.stories.module.scss b/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.stories.module.scss
index 81fb03d76..a57add554 100644
--- a/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.stories.module.scss
+++ b/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.stories.module.scss
@@ -6,10 +6,6 @@
 	width: 250px;
 }
 
-.narrowInput {
-	width: 100px;
-}
-
 .mediumInput {
 	width: 140px;
 }
@@ -23,7 +19,6 @@
 	width: 100%;
 	white-space: normal;
 	overflow-wrap: anywhere;
-	text-align: end;
 }
 
 .valueWithIcon {
@@ -39,12 +34,18 @@
 }
 
 .pairsColumn {
-	display: flex;
-	flex-direction: column;
-	gap: var(--xs);
+	display: grid;
+	grid-template-columns: auto 1fr;
+	column-gap: var(--xs);
+	row-gap: var(--xs);
+	align-items: start;
 	width: 336px;
 }
 
+.pairsColumn > [data-orientation='horizontal'] {
+	display: contents;
+}
+
 .responsiveDemo {
 	display: flex;
 	flex-direction: column;
@@ -65,14 +66,20 @@
 }
 
 .responsivePairs {
-	display: flex;
-	flex-direction: column;
-	gap: var(--xs);
+	display: grid;
+	grid-template-columns: auto 1fr;
+	column-gap: var(--xs);
+	row-gap: var(--xs);
+	align-items: start;
 	border: 1px dashed var(--border);
 	border-radius: 4px;
 	padding: var(--sm);
 }
 
+.responsivePairs > [data-orientation='horizontal'] {
+	display: contents;
+}
+
 .statusBadge {
 	display: inline-flex;
 	align-items: center;
@@ -88,6 +95,5 @@
 .tagGroup {
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: flex-end;
 	gap: var(--xs);
 }
diff --git a/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.stories.tsx b/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.stories.tsx
index 663a1c6d2..3797eddaa 100644
--- a/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.stories.tsx
+++ b/packages/design-system/src/components/ds-key-value-pair/ds-key-value-pair.stories.tsx
@@ -153,14 +153,7 @@ export const Group: Story = {
 					keyLabel="SN"
 					value={serial}
 					orientation="horizontal"
-					editInput={
-						<DsTextInput
-							value={serial}
-							onValueChange={setSerial}
-							size="small"
-							className={storyStyles.narrowInput}
-						/>
-					}
+					editInput={<DsTextInput value={serial} onValueChange={setSerial} size="small" />}
 				/>
 				<DsKeyValuePair keyLabel="Model" value="Cisco RTR-X2000" readOnly orientation="horizontal" />
 				<DsKeyValuePair
@@ -214,14 +207,7 @@ export const ResponsiveWidth: Story = {
 						keyLabel="Serial Number"
 						value={serial}
 						orientation="horizontal"
-						editInput={
-							<DsTextInput
-								value={serial}
-								onValueChange={setSerial}
-								size="small"
-								className={storyStyles.narrowInput}
-							/>
-						}
+						editInput={<DsTextInput value={serial} onValueChange={setSerial} size="small" />}
 					/>
 					<DsKeyValuePair keyLabel="Model" value="Cisco RTR-X2000" readOnly orientation="horizontal" />
 					<DsKeyValuePair