Dev: Refine the design for Address section on Page 5

[AshishDes]

Overview

We need to re-layout the fields in the address section of page 5 of calculator, so that the content does not overlap, reduces the space between columns and that it matches the order on page 1 of calculator.

Details

• Implement the new design for Page 5 As described in Issue Refine the design for AIN appearance on Page 5 #2300
  • The new order of fields mirrors page 1 of the calculator.
  • Content in fields expands vertically in 2-column layouts.
  • Space between columns is reduced

Example of problems (current state using AIN as the example)

The following example uses the AIN, but the problem is on any field that has lots of information. See the Example of Redesign (generalized after state) for how we anticipate extra data in field

Test Case 1 (4 AIN numbers) - no wrapping problems

• Name of project: Koreatown Hotel (COPY)
• Number of AINs: 4
• Page 5 behavior: it displays them all on the same line because there is room for them (under the threshold of 5)
• PDF behavior: More than one AIN is making it wrap and overlap

Test Case 3 (27 AIN numbers) - WRAPPING PROBLEM

• Name of project: ain test case 3
• Number of AINs: 27
• Page 5 behavior: It moves the AIN to the next line, but then when it's more than one line of values (11 or greater AINs), it overlaps with the other lines.
• PDF behavior: More than one AIN is making it wrap and overlap

Example of Redesign (generalized after state)

Action Items

• Assign yourself to the development issue.
• Move the development issue from the Prioritized Backlog to In Progress.
• Implement the changes described for Page 5 - note that there is a separate issue for similar changes to the PDF printout.
• Create a PR, if applicable.
• Create a new slide (or edit one if it already exists) in staging and add the before and after images
• Once the PR has been approved, use it to close this issue. If there is no PR is associated with this issue, close this issue after lead signoff.

Resources/Instructions

• Design details: Refine the design for AIN appearance on Page 5 #2300 (comment)
• Design mockups: link to Ready for Dev section in the related Figma page

Staging and Release decks

• Staging Deck
  • Staging slide, 2691
• Release Deck
  • [2025-MM-DD Release deck, slide 2691]