Hello @baohuachu2. The input-date-picker "scale" attribute modifies the component's sizing, such as its height and text, but not its width.
In this case for consistent styling you could add CSS to the panel's contents, or directly to the input-date-picker component, such as:
<style>
.date-range-panel > * {
margin: 1rem;
}
</style>
<calcite-panel class="date-range-panel" heading="Date picker test" height-scale="l" dismissible>
<calcite-label>
Set the date range
<calcite-input-date-picker range scale="s" overlay-positioning="fixed">
</calcite-input-date-picker>
</calcite-label>
</calcite-panel>