fix(ui): adjust Input component height for placeholder-only inputs

[JExcellence]

User description

fixed input component height especially when placeholder and label being set.

---

PR Type

Bug fix

---

Description

• Adjust Input component height for placeholder-only inputs

• Reduce small size input height when placeholder is present

• Fix floating label positioning in small size variant

• Update dev component test indentation for consistency

---

Diagram Walkthrough

flowchart LR
  A["Input.module.scss"] -->|"Adjust min-height logic"| B["Base & Small variants"]
  B -->|"Remove complex selector"| C["Simplify placeholder styling"]
  B -->|"Fix label positioning"| D["Floating label alignment"]
  E["ComponentsCheckPage.tsx"] -->|"Format indentation"| F["Test component layout"]

Loading

File Walkthrough

	Relevant files
Bug fix	Input.module.scss Refactor Input height and label positioning logic                packages/core/src/components/Input.module.scss Simplified placeholder selector from compound &:has(.placeholder):has(.floating) to single &:has(.placeholder) Changed base variant min-height to var(--static-space-48) when placeholder is present Added placeholder-specific min-height rule for small size variant (var(--static-space-40)) Adjusted floating label top position in small variant from calculated value to direct var(--static-space-4) +7/-5
Formatting	ComponentsCheckPage.tsx Standardize Input test component indentation                          apps/dev/src/components/ComponentsCheckPage.tsx Reformatted Input component test cases with consistent indentation Aligned array elements for better code readability +4/-4

---

[qodo-code-review]

PR Compliance Guide 🔍

(Compliance updated until commit 52189f8)

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

---

Previous compliance checks

Compliance check up to commit 52189f8

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules

[qodo-free-for-open-source-projects]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Refine selector to target placeholder-only inputs Refine the CSS selector from &:has(.placeholder) to &:has(.placeholder):not(:has(.label)) to prevent the min-height reduction from affecting inputs that also have a floating label. packages/core/src/components/Input.module.scss [9-11] - &:has(.placeholder) { + &:has(.placeholder):not(:has(.label)) { min-height: var(--static-space-48); } Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a potential UI regression where a floating label could be cramped due to the overly broad CSS selector, and the proposed fix is accurate.	Medium
More

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Refine CSS selector to prevent bugs Refine the CSS selector to &:has(.placeholder):not(:has(.floating)) to ensure the height reduction only applies to inputs with a placeholder and no floating label, preventing potential UI clipping issues. packages/core/src/components/Input.module.scss [1-12] .base { backdrop-filter: var(--backdrop-filter); min-height: var(--static-space-56); &.focused, &.filled { border-color: var(--neutral-border-medium); } - &:has(.placeholder) { + &:has(.placeholder):not(:has(.floating)) { min-height: var(--static-space-48); } } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a potential visual regression where the broadened selector &:has(.placeholder) would incorrectly reduce the height of inputs that also have a floating label, and provides a valid fix.	Medium
More