fix(TextField): Mobile SafariでTextField type=dateの高さが潰れてしまうのを修正

[Qs-F]

User description

チケット

• Close Mobile SafariでTextField type="date" が崩れるのを修正 #1470

実装内容

• Mobile SafariでTextField type=dateの高さが潰れてしまうのを修正

スクリーンショット

変更前	変更後

相談内容(あれば)

• Safariだと下の画像のようにテキストの位置がずれてしまうのだが、inputにflexをいれると今度はChrome等で表示が崩れるので一旦無視してます

---

Type

bug_fix

---

Description

• Fixed an issue where the height of TextField components with type=date was being crushed in Mobile Safari.
• Ensured proper text alignment in date input fields by adding a CSS rule.

---

Changes walkthrough

	Relevant files
Bug fix	TextField.tsx Fix TextField Height Issue for Type Date on iOS                    packages/for-ui/src/textField/TextField.tsx Adjusted the height of the TextField component for type=date to prevent it from being crushed in Mobile Safari. Added a specific CSS rule &::-webkit-date-and-time-value]:text-start to ensure proper text alignment in date input fields. +1/-1

---

✨ PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[changeset-bot]

🦋 Changeset detected

Latest commit: 20671fb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@4design/for-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[qodo-merge-pro]

PR-Agent was enabled for this repository. To use it, please link your git user with your CodiumAI identity here.

PR Description updated to latest commit (c24da01)

• Copy walkthrough table to "Files Changed" Tab

[qodo-merge-pro]

PR-Agent was enabled for this repository. To use it, please link your git user with your CodiumAI identity here.

PR Review

⏱️ Estimated effort to review [1-5]	2, because the PR involves a specific bug fix with a clear description and a single change in the code. The change is straightforward and targets a specific CSS issue on Mobile Safari. The complexity is low, and the change is isolated to a single component.
🧪 Relevant tests	No
🔍 Possible issues	CSS Specificity: The added CSS rule &::-webkit-date-and-time-value]:text-start might have specificity issues with existing styles or future styles. It's important to ensure this rule doesn't unintentionally override or conflict with other CSS.
🔒 Security concerns	No

---

✨ Review tool usage guide:

---

Overview:
The review tool scans the PR code changes, and generates a PR review which includes several types of feedbacks, such as possible PR issues, security threats and relevant test in the PR. More feedbacks can be added by configuring the tool.

The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.

• When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

• With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

See the review usage page for a comprehensive guide on using this tool.

[qodo-merge-pro]

PR Code Suggestions

Category

Suggestions

Enhancement

Replace fixed height with a responsive height for the input field. Consider using a more responsive height value instead of a fixed height (h-6) for the input field. Fixed heights can cause display issues on different screen sizes or zoom levels. A responsive height can be achieved with padding or min-height to ensure the input field scales appropriately across devices. packages/for-ui/src/textField/TextField.tsx [176] -`text-r text-shade-dark-default placeholder:text-shade-light-default h-6 grow p-0 font-sans placeholder:opacity-100 focus:shadow-none [&::-webkit-date-and-time-value]:text-start` +`text-r text-shade-dark-default placeholder:text-shade-light-default min-h-6 grow p-0 font-sans placeholder:opacity-100 focus:shadow-none [&::-webkit-date-and-time-value]:text-start`

---

✨ Improve tool usage guide:

---

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

• When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

• With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

See the improve usage page for a comprehensive guide on using this tool.

[cloudflare-workers-and-pages]

Deploying for-ui with    Cloudflare Pages

Latest commit:	20671fb
Status:	✅  Deploy successful!
Preview URL:	https://3355a637.for-ui.pages.dev
Branch Preview URL:	https://fix-textfield-height-type-da.for-ui.pages.dev

View logs

[locona]

LGTM