#1381/error fixed now the text is no longer getting hidden and is shown in one single line as intended

[ShubhPaliwal11]

Related Issues

#1381

Short Description and Why It's Useful

Fixed the visibility issue of the "Complete order on fulfillment" toggle label on the Create Transfer Order page. The label text was wrapping into multiple lines and getting hidden due to insufficient container width.

Changes made:

• Restructured the toggle component to use proper ion-label with ion-toggle in separate elements
• Increased the minimum width of the order info card to 400px to accommodate the full text
• Added CSS to prevent text wrapping (white-space: nowrap)

This ensures the toggle label is clearly visible and readable on a single line at all zoom levels, improving the user experience when creating transfer orders.

Screenshots of Visual Changes before/after (If There Are Any)

BEFORE:

AFTER:

Contribution and Currently Important Rules Acceptance

• I read and followed contribution rules

[gemini-code-assist]

Summary of Changes

Hello @ShubhPaliwal11, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a user interface issue on the Create Transfer Order page where the 'Complete order on fulfillment' toggle label was not fully visible due to text wrapping and insufficient container width. The changes involve restructuring the toggle component, adjusting the layout's minimum width, and applying specific CSS to ensure the label is always clearly displayed on a single line, thereby enhancing the user experience.

Highlights

• UI Fix for Toggle Label: The 'Complete order on fulfillment' toggle label on the Create Transfer Order page was previously wrapping and getting hidden. This PR resolves the issue by ensuring the label is always visible and on a single line.
• Component Restructuring: The ion-toggle component for the fulfillment option has been refactored to use a separate ion-label with ion-toggle placed in the slot="end" for better structure and control over text display.
• Layout Adjustment: The minimum width of the order info card has been increased to 400px to provide sufficient space for the toggle label, preventing it from being truncated.
• CSS for Text Wrapping: A white-space: nowrap CSS rule has been explicitly added to the fulfillment toggle's label to prevent text wrapping, ensuring it remains on a single line regardless of content length.
• Search Bar Placeholder Update: The placeholder text for the product search bar in the AddProductModal has been simplified from 'Search SKU or product name' to 'Search products'.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

Thank you for this contribution. The fix correctly addresses the UI issue where the toggle label was wrapping and getting hidden by restructuring the component and adjusting the layout. The changes are logical and effective. I've added a few minor suggestions to improve code cleanliness and remove redundancy. Please take a look at them.

[gemini-code-assist]

This blank line appears to be unnecessary and can be removed to improve code cleanliness.

[gemini-code-assist]

For better readability and to follow standard code formatting, please indent these elements correctly within the <ion-item> tag.

              <ion-icon :icon="checkmarkDoneOutline" slot="start"/>
              <ion-label class="ion-no-wrap">{{ translate("Complete order on fulfillment") }}</ion-label>
              <ion-toggle data-testid="toggle-complete-on-fulfillment" slot="end" :checked="currentOrder.statusFlowId === 'TO_Fulfill_Only'" @ionChange="toggleStatusFlow" />

[gemini-code-assist]

This CSS rule is redundant because the ion-no-wrap class is already applied to the <ion-label> element on line 30, which also sets white-space: nowrap;. Using !important should also be avoided when possible. Please remove this block and rely on the Ionic utility class.