From 4ac5453e2f65ca3397237ca9b9a7bdfe0a8c8430 Mon Sep 17 00:00:00 2001
From: Artur Lang <209750178+artur-langl@users.noreply.github.com>
Date: Fri, 20 Mar 2026 15:21:07 +0200
Subject: [PATCH 1/2] fix(datepicker): fix datepicker icons leaving input box

---
 .../date-picker/date-picker.component.scss    |  2 ++
 .../form/date-picker/date-picker.stories.ts   | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/tedi/components/form/date-picker/date-picker.component.scss b/tedi/components/form/date-picker/date-picker.component.scss
index e37f5bf55..377e7e184 100644
--- a/tedi/components/form/date-picker/date-picker.component.scss
+++ b/tedi/components/form/date-picker/date-picker.component.scss
@@ -51,6 +51,7 @@ tedi-date-picker {
     color: var(--form-input-text-filled);
     border: 0;
     border-radius: var(--form-field-radius);
+    min-width: 0;
 
     &::placeholder {
       color: var(--form-input-text-placeholder);
@@ -67,6 +68,7 @@ tedi-date-picker {
     align-items: center;
     align-self: center;
     justify-content: center;
+    min-width: 0;
   }
 
   &__clear {
diff --git a/tedi/components/form/date-picker/date-picker.stories.ts b/tedi/components/form/date-picker/date-picker.stories.ts
index 97ccf32e9..a14fde226 100644
--- a/tedi/components/form/date-picker/date-picker.stories.ts
+++ b/tedi/components/form/date-picker/date-picker.stories.ts
@@ -256,3 +256,27 @@ export const WithReactiveForms: StoryObj<DatePickerComponent> = {
     };
   },
 };
+
+export const WithLowWidth: StoryObj<DatePickerComponent> = {
+  render: (args) => {
+    return {
+      template: `
+        <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
+          <tedi-date-picker ${argsToTemplate(args)}
+            inputPlaceholder="Select a date..."
+          />
+          <tedi-date-picker ${argsToTemplate(args)}
+            inputPlaceholder="Select a date..."
+          />
+          <tedi-date-picker ${argsToTemplate(args)}
+            inputPlaceholder="Select a date..."
+          />
+          <tedi-date-picker ${argsToTemplate(args)}
+            inputPlaceholder="Select a date..."
+          />
+        </div>
+
+      `,
+    };
+  },
+};

From d62ae1531b9dcc61ac740fe3036063aadc6837af Mon Sep 17 00:00:00 2001
From: Artur Lang <209750178+artur-langl@users.noreply.github.com>
Date: Fri, 20 Mar 2026 15:21:38 +0200
Subject: [PATCH 2/2] fix(datepicker): fix datepicker icons leaving input box
 #371

---
 tedi/components/form/date-picker/date-picker.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tedi/components/form/date-picker/date-picker.component.scss b/tedi/components/form/date-picker/date-picker.component.scss
index 377e7e184..2614d3530 100644
--- a/tedi/components/form/date-picker/date-picker.component.scss
+++ b/tedi/components/form/date-picker/date-picker.component.scss
@@ -46,12 +46,12 @@ tedi-date-picker {
 .tedi-date-picker {
   &__input {
     flex: 1;
+    min-width: 0;
     padding-left: var(--form-field-padding-x-md-default);
     font-size: var(--body-regular-size);
     color: var(--form-input-text-filled);
     border: 0;
     border-radius: var(--form-field-radius);
-    min-width: 0;
 
     &::placeholder {
       color: var(--form-input-text-placeholder);