From 4831bf9dc9303be2799bdc0746bc71eda35b32c1 Mon Sep 17 00:00:00 2001
From: NabeelAyubee <nayubi7@gmail.com>
Date: Mon, 12 Aug 2024 20:49:40 +0530
Subject: [PATCH] fix(calendar): fix calendar icon CSS issue #16446

---
 .all-contributorsrc                                   |  9 +++++++++
 README.md                                             |  1 +
 .../src/components/DatePicker/DatePicker.stories.js   | 11 +++++++++++
 .../scss/components/date-picker/_flatpickr.scss       |  4 ++--
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index a474cc7a8213..3aa3d3909e52 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1587,6 +1587,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "NabeelAyubee",
+      "name": "Md Nabeel Ayubee",
+      "avatar_url": "https://avatars.githubusercontent.com/u/64087875?v=4",
+      "profile": "https://github.com/NabeelAyubee",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
index 69f0de54bb8e..09bb0f07098e 100644
--- a/README.md
+++ b/README.md
@@ -299,6 +299,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/lluisrojass"><img src="https://avatars.githubusercontent.com/u/15043356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luis</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lluisrojass" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/lharrison13"><img src="https://avatars.githubusercontent.com/u/172074450?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luke Harrison</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lharrison13" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/tekno0ryder"><img src="https://avatars.githubusercontent.com/u/8721803?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Alsinan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tekno0ryder" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/NabeelAyubee"><img src="https://avatars.githubusercontent.com/u/64087875?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Md Nabeel Ayubee</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=NabeelAyubee" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index 6581c877b137..6b3d520e76fb 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -61,6 +61,17 @@ export const SingleWithCalendar = () => (
   </DatePicker>
 );
 
+export const CalendarWithInline = () => (
+  <DatePicker datePickerType="single" inline={true}>
+    <DatePickerInput
+      placeholder="mm/dd/yyyy"
+      labelText="Date Picker label"
+      id="date-picker-single"
+      size="md"
+    />
+  </DatePicker>
+);
+
 export const RangeWithCalendar = () => {
   return (
     <DatePicker datePickerType="range">
diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss
index bf0e035f078e..2e326a389739 100644
--- a/packages/styles/scss/components/date-picker/_flatpickr.scss
+++ b/packages/styles/scss/components/date-picker/_flatpickr.scss
@@ -145,9 +145,9 @@
   }
 
   .flatpickr-calendar.inline {
-    position: relative;
+    position: absolute;
     display: block;
-    inset-block-start: convert.to-rem(2px);
+    inset-block-start: auto;
   }
 
   .flatpickr-calendar.static {