diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
index 5da6a06d1b1..42e93b54a9c 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -24,9 +24,7 @@
 @include disabled();
 
 .calendar-picker-wrapper {
-  @apply static
-    w-full
-    shadow-none;
+  @apply shadow-none;
   transform: translate3d(0, 0, 0);
 }
 
@@ -89,24 +87,6 @@
   }
 }
 
-:host([scale="s"][range]:not([layout="vertical"])) {
-  .calendar-picker-wrapper {
-    inline-size: 216px;
-  }
-}
-
-:host([scale="m"][range]:not([layout="vertical"])) {
-  .calendar-picker-wrapper {
-    inline-size: 286px;
-  }
-}
-
-:host([scale="l"][range]:not([layout="vertical"])) {
-  .calendar-picker-wrapper {
-    inline-size: 398px;
-  }
-}
-
 .menu-container {
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
   @include floatingUIContainer();
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index b4529060481..15677fd5fda 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -96,9 +96,56 @@ export const invalidStatus_TestOnly = (): string => html`
 
 export const scales_TestOnly = (): string =>
   html`
-    <calcite-input-date-picker scale="s" icon value="2020-12-12"></calcite-input-date-picker>
-    <calcite-input-date-picker scale="m" icon value="2020-12-12"></calcite-input-date-picker>
-    <calcite-input-date-picker scale="l" icon value="2020-12-12"></calcite-input-date-picker>
+    <style>
+      .container {
+        display: flex;
+        flex-direction: column;
+        width: 1400px;
+        height: 1200px;
+        gap: 400px;
+      }
+
+      .use-case {
+        display: flex;
+        gap: 100px;
+      }
+    </style>
+    <div class="container">
+      <div class="use-case">
+        <calcite-input-date-picker scale="s" icon open value="2020-12-12"></calcite-input-date-picker>
+        <calcite-input-date-picker scale="m" icon open value="2020-12-12"></calcite-input-date-picker>
+        <calcite-input-date-picker scale="l" icon open value="2020-12-12"></calcite-input-date-picker>
+      </div>
+      <div class="use-case">
+        <calcite-input-date-picker
+          scale="s"
+          open
+          start="2020-12-12"
+          end="2020-12-16"
+          range
+          layout="horizontal"
+          value="2020-12-12"
+        ></calcite-input-date-picker>
+        <calcite-input-date-picker
+          scale="m"
+          open
+          start="2020-12-12"
+          end="2020-12-16"
+          range
+          layout="horizontal"
+          value="2020-12-12"
+        ></calcite-input-date-picker>
+        <calcite-input-date-picker
+          scale="l"
+          open
+          start="2020-12-12"
+          end="2020-12-16"
+          range
+          layout="horizontal"
+          value="2020-12-12"
+        ></calcite-input-date-picker>
+      </div>
+    </div>
   `;
 
 export const darkModeRTL_TestOnly = (): string => html`