highChrome & navigation600, 768, 1024re-checked
Clicking the notification bell opens search instead of the tray (480–1080px)
The search overlay opens and the search box takes focus. The notification tray does not open. Only the right-most ~11px of the bell responds, so the bell looks broken.
Measured elementFromPoint at the bell's left edge and centre returns the search <input> at 480, 520, 560, 600, 640, 700, 767, 768, 800, 900, 1000 and 1024px. The input box ends 45px past its grey pill: at 768 the pill ends at x=445 and the input at x=490, while the bell spans x=475–502. At 1024 the pill ends at 701, the input at 746, and the bell spans 731–758. The bell is clickable from about 1080px up, once the pill reaches its 510px max-width. Real clicks at the bell centre (mouse at 1024, touch tap at 768) gave trayOpen=false, focus=input, search active.
Where App header (every logged-in page) /#/ (any)
Repro Open the app at any width from 480px to about 1080px (phone landscape, iPad portrait or landscape, small laptop). Click or tap the middle of the bell icon.
Cause The input inside the pill is position: absolute; left: 45px; width: 100%, so it is 45px wider than the pill and pokes out of its right edge. The pill has overflow: visible. The input is transparent, so the overhang can't be seen, but it still catches clicks. The search container is at z-index 102, above the bell's container at 101. Below the pill's 510px max-width, the bell sits right after the pill, so the invisible overhang covers it.app/frontend/application/src/app/search/components/header-search-bar/header-search-bar.component.scss:223-230app/frontend/application/src/app/search/components/header-search-bar/header-search-bar.component.scss:218app/frontend/application/src/app/search/components/header-search-bar/header-search-bar.component.scss:18app/frontend/application/src/app/notification/notification-anchor/notification-anchor.component.scss:8
Fix Size the input so it stays inside the pill (width: calc(100% - 45px), or right: 16px instead of a width), and/or give the label overflow: hidden.
Introduced 2025-05-22 · 3a4441694 · dgarvanski · #5242 CT-3958: [SEARCH][WEB] Implement front end changes · in production
highChrome & navigation768, 1440re-checked
Search results: the 'View More' under Same Currency Payments checks the conversion count
With 5 matching same-currency payments and 1 conversion, the dropdown shows 3 payments and no 'View More', so payments 4 and 5 can't be reached and the user thinks there are only 3. The reverse case also fails: 5 conversions and 2 same-currency payments puts a 'View More' under the 2 payments, and it leads nowhere new.
Measured Stub {5 conversions, 2 same-currency} gave Same Currency Payments rows=2, viewMore=true. Stub {1 conversion, 5 same-currency} gave rows=3, viewMore=false.
Where Header search results dropdown /#/ (header search)
Repro Search for a term that matches more than 3 same-currency payments and at most 3 conversions (or the reverse).
Cause The same-currency block was copied from the conversion block and still reads @if (searchResults().trades.length > 3). trades holds the conversions only. A later commit (a0e78c130) fixed this block's click target to 'sameCurrency', sameCurrencyTransfers but left the condition alone.app/frontend/application/src/app/search/components/header-search-results/header-search-results.component.html:44
Fix Change line 44 to @if (searchResults().sameCurrencyTransfers.length > 3).
Introduced 2025-05-20 · 3a9dc078e · dgarvanski · #5242 CT-3958: [SEARCH][WEB] Implement front end changes · in production
highRecipients, dashboard & alerts390, 480, 600, 768, 1024
Recipient approval page: a changed IBAN runs off the screen and can't be read on a phone
The old and new IBANs sit side by side in two cells that cannot wrap. On a phone only 'GB3' of the new IBAN is visible and the rest is off-screen unless you scroll the whole app sideways. At 480-767px the page scrolls sideways and the green cell spills out of the card. With longer IBANs (FR -> PL) the row still overflows at 768px, and at 1024px its columns sit 35px left of every other row.
Measured GB->GB at 390px: the new-value cell spans x=333-578 in a row that ends at 360, so 218px is off-screen (.ct-app-body overflow-x:auto). At 480px and 600px the document is 658px wide (178px/58px of sideways scroll). FR->PL at 768px: the new value ends at 750, past the row end at 738, the label column shrinks to 59px, and the IBAN cells start at 149/445 vs 284/511 on the other rows. At 1024px: 345/641 vs 380/664. Fine at 1440px.
Where Approvals > Approve updates to recipient (old vs new value table) /#/approvals/recipient/:id
Repro As an approver, open a pending recipient update whose IBAN changed (stubbed GET /api/v1/pending_approvals/:id with changeset.iban GB29NWBK60161331926819 -> GB33BUKB20201555555555, both ordinary 22-character UK IBANs). View at 390px, then at 480-767px.
Cause Values are unbroken monospace strings (Source Code Pro), and .old-value/.new-value are width:100% siblings in a ct-flex flex-row inside .pending-recipient-change-value (flex: 1 1 70%). Neither the flex item (min-width:auto) nor the cells (overflow-wrap:normal) allow shrinking below the IBAN's width, so the row grows past the card. The layout has no narrow-screen variant: old and new values stay side by side at every width.app/frontend/application/src/app/approvals/pages/recipient-approval-page/recipient-approval-page.component.scss:49app/frontend/application/src/app/approvals/pages/recipient-approval-page/recipient-approval-page.component.scss:58app/frontend/application/src/app/approvals/pages/recipient-approval-page/recipient-approval-page.component.scss:65app/frontend/application/src/app/approvals/pages/recipient-approval-page/recipient-approval-page.component.html:266
Fix Add min-width:0 to .pending-recipient-change-value and overflow-wrap:anywhere to .old-value/.new-value/.base-value. Better still, stack the old and new values below 768px.
Introduced 2022-08-02 · 3c864229c · dgarvanski · #4009 CT-2914: [APPROVAL] UI for reviewing recipient changes · in production
mediumChrome & navigation390, 1024
Account switcher with many accounts: last accounts, Settings and Logout can't be reached
Desktop and tablet: the list runs past the bottom of the screen, and the wheel scrolls the page behind it, so the last account, Settings and Logout are out of reach. Phone: the Logout row is pinned to the bottom of the screen on top of an account row, whose name shows through it, and the last account and Settings are pushed off-screen.
Measured 1024x700 with 12 accounts: list height 729px starting at y=59. Kingsway Motors (last account), Settings and Logout are below 700, and the page scrolled to 849 instead. At 390x664, the fixed Logout (bottom 0) overlaps the 'Juniper Design Studio' row, and Kingsway Motors and Settings are off-screen. A 1366x657 viewport overflows at about 10 accounts: 60 + n×54 + 80 > 657.
Where Header account switcher dropdown /#/ (any)
Repro Log in as a user with about 10 or more accounts (stubbed with 12) on a short screen, e.g. 1024x700, a 1366x657 laptop viewport, or a 390x664 phone. Open the account switcher and try to scroll to Settings or Logout.
Cause At ≥480px the list has no position, max-height or overflow. It stays in normal flow inside the position:fixed header and spills below it, and fixed content can't be scrolled. On phones it is position: fixed; height: 100% with no top, bottom or overflow, so it starts at y=60 and runs 60px past the viewport. Logout is position: fixed; bottom: 0 on top of whatever row is there.app/frontend/application/src/app/layout/components/account-switcher/account-switcher.component.scss:4-17app/frontend/application/src/app/layout/components/account-switcher/account-switcher.component.scss:118-124app/frontend/application/src/app/layout/components/account-switcher/account-switcher.component.scss:141-144
Fix Give .ct-account-list max-height: calc(100vh - 60px); overflow-y: auto. On phones use top: 60px; bottom: 0 and make Logout a sticky footer of the scroll area instead of position:fixed.
Introduced 2021-09-16 · 232822085 · Deyan Garvanski · #3469 CT-2747: [MULTI-ACCOUNT] Design for the "account switcher" · in production
mediumTransfers & quotes1024, 1440
Quote cards are wider than their column; at 1024px big amounts push BOOK off-screen
The desktop quote card never fits its 800px step column. At 1024px it runs about 69px past the column even for 25,000 GBP. With a 9-digit JPY amount the page scrolls sideways and the BOOK button is cut off at the right edge ('BOO'). At 1440px the card and timer bar hang off-centre to the right of every other step.
Measured 1024px: column 142-942, card 163-1010.5 (25,000.00 GBP); card right 1115.4 and document scrollWidth 1115 > 1024 viewport (98,765,432.00 JPY -> 234,568,888.65 HUF); 1149 for 987,654,321 JPY. 1440px: column scrollWidth 834 / 938 / 972 vs clientWidth 800. Card row = logo 120 + margin 35 + amounts 483 + BOOK 130 + padding 2x40 = 848px, but only ~779px is available.
Where Quote results (Confirm Transfer step) /#/quotes/:id
Repro Make a Transfer, get quotes, stay on the results. Seen with stubbed quotes (PUT /api/v1/quotes fulfilled locally): 25,000.00 GBP to EUR, 98,765,432.00 JPY to HUF and 987,654,321.00 JPY to HUF. Measure the card against ct-quote-book-page .content-section (max-width 800px).
Cause The desktop card is a single flex row with 35px/40px padding, a fixed 120px logo with a 35px right margin, 24px amounts and a 130px BOOK button. Every item keeps the default min-width:auto, so nothing can shrink or wrap, and the row's min-content is wider than the ~779px column (800px max, 40px tracker, -19px margin). The overflow is visible, so the card spills out of the column. On a 1024px screen with the collapsed sidebar it spills past the viewport.app/frontend/application/src/app/trade/pages/quote-book-page/quote-book-page.component.scss:504-508app/frontend/application/src/app/trade/pages/quote-book-page/quote-book-page.component.scss:535-541app/frontend/application/src/app/trade/pages/quote-book-page/quote-book-page.component.scss:253-256app/frontend/application/src/app/trade/components/quotation/quotation.component.html:5-41
Fix Let the row shrink: min-width: 0 on the card's flex items, drop the fixed 35px logo margin below 1200px, and let the BOOK button wrap under the amounts (or scale the amounts down) when the row doesn't fit.
Introduced 2020-01-06 · 80bc9a463 · Deyan Garvanski · #2737 CT-2480:[TRADE] Migrate quote book component to new Angular (the fixed 120px logo width came later, #3511, 2021-10-12) · in production
mediumTransfers & quotes991re-checked
At exactly 991px the quote card shows BOOK with no amounts or rate
The card shows only the partner logo and a BOOK button. The sell amount, buy amount, rate and delivery date are all missing, because both the desktop and the mobile blocks are display:none at that one width.
Measured 990px: desktop none, mobile flex. 991px: desktop none, mobile none; card innerText is just 'BOOK'. 992px: desktop flex, mobile none.
Where Quote results /#/quotes/:id
Repro Open quote results (stubbed quotes) in a window whose CSS width is exactly 991px. Compare with 990px and 992px.
Cause .ct-mobile-quote is hidden by breakpoint-between($max-tablet-lg, ...), i.e. min-width 991px, while .hidden-mobile hides the desktop block by breakpoint-between($min-phone, $max-tablet-lg), i.e. max-width 991px. Both media queries match at 991px. The desktop-only rules should start at $min-desktop-sm (992px). The same PR moved trade.scss:670 to $max-tablet-lg as well.app/frontend/application/src/app/trade/pages/quote-book-page/quote-book-page.component.scss:518-520app/frontend/application/src/app/trade/pages/quote-book-page/quote-book-page.component.scss:579-582
Fix Use $min-desktop-sm instead of $max-tablet-lg as the lower bound in quote-book-page.component.scss:504, :518 and :529 (and trade.scss:670).
Introduced 2021-10-21 · 05d79bf9b · Deyan Garvanski · #3530 [QUOTE] Adjust quotation container breakpoints · in production
mediumTransfers & quotes600
Transfer history at 480-767px: dates split over 2-3 lines and the row buttons stagger
The status and date columns are hidden only on phones (up to 479px), so small tablets get all five columns in ~470px. 'Book / delivery date' breaks '1 Jul 2024' into two lines and '25 Jun 2024' into three, with the icons floating beside the middle. 'Awaiting Payment Details' wraps inside its outlined box with the text touching the border. The Trade Summary button drops below Save as PDF.
Measured 600px: date cell 486-565 (79px wide), 2 text lines per date with real data, 3 with stubbed 10-digit amounts; status box 66px wide with 0px horizontal padding; the rate text starts 8px from the cell edge where the 9px arrow image is painted.
Where Transfer history (Conversion Transfers, Active and Completed) /#/trades-history
Repro Open Transfer History at 600px wide (any width 480-767px). Real dev data shows it; stubbed large amounts make it worse.
Cause hide-xs/show-xs switch at $max-phone (479px) only, so the 480-767 range keeps the desktop table. Since #4800 each date is its own flex row (icon + text) inside a display:flex <td>, so the date text wraps inside the narrow column instead of staying on one line. Trade Summary is float:right inside a flex item, so it wraps under the PDF link when the recipients block is wide.app/frontend/application/src/app/trade/components/trade-history-list/trade-history-list.component.scss:221-229app/frontend/application/src/app/trade/components/trade-history-list/trade-history-list.component.html:74-83app/frontend/application/src/app/trade/components/trade-history-list/trade-history-list.component.scss:215-218
Fix Apply the phone layout (status pill above the row, date columns hidden or stacked) up to $max-tablet-sm (767px), and add white-space: nowrap to the date rows.
Introduced 2024-02-20 · 6ca8ae176 · dgarvanski · #4800 CT-2658: [SCSS] Clean up old styles · in production
mediumRecipients, dashboard & alerts390, 1440
Balances: currency name is blank under every currency code (group headers and filter)
Each group header shows only the code (e.g. 'EURC'), with an empty line where the currency name should be. The filter options are the same. Only the expanded account row shows the name ('EURC - Euro Coin').
Measured Live API: .balance-currency-name is '' (height 0) for EURC, USDC and USDT at 1440px and 390px, and all 3 dropdown options have an empty name. The expanded row reads ' - Euro Coin'.
Where Funds on Balance: currency group headers and the currency filter dropdown /#/balances
Repro Open /#/balances with any balances. Stubbed GET /api/v1/balances in EURC/USDC/USDT, which the dev DB's live /api/v1/currencies/supported knows. Look under each code, open the 'All Balances' dropdown, then expand an account.
Cause PR #4241 changed GET /api/v1/currencies/supported from a {code: name} hash to an array of {code, name, precision, is_crypto}. PR #4273 ('[BALANCES] Fix the currency name') then fixed only the expanded row, which now uses findCurrencyByCode (line 101). The group header and the dropdown option still do currencies[balanceGroup.key], which indexes an array by currency code and returns undefined.app/frontend/application/src/app/balances/pages/balances-page/balances-page.component.html:37app/frontend/application/src/app/balances/pages/balances-page/balances-page.component.html:65app/frontend/application/src/app/balances/pages/balances-page/balances-page.component.html:101
Fix Replace both currencies[balanceGroup.key] with currenciesService.findCurrencyByCode(currencies, balanceGroup.key)?.name, or build a code->name map once in getCurrencies().
Introduced 2022-12-12 · b8e964cd1 · Kamen Hursev · #4241 CT-2995: [CRYPTO] API related changes to support crypto (partial fix: 28e5833fc, #4273 '[BALANCES] Fix the currency name', 2023-01-16) · in production
mediumRecipients, dashboard & alerts1440re-checked
Dashboard recipient cards mask the wrong IBAN digits ('•••• 0 00')
The masked IBAN shows a space and only two or three digits: 'IBAN: •••• 0 00', '•••• 8 19', '•••• 606'. The Recipients list masks the same IBAN correctly as '•••• 3000'. This is a text bug, so it happens at every width; it was measured at 1440px.
Measured Card text: 'IBAN: •••• 0 00' (DE), 'IBAN: •••• 8 19' (GB), 'IBAN: •••• 606' (FR). Recipients list for the DE IBAN: 'IBAN: •••• 3000'.
Where Dashboard > Quick access to recent recipients (recipient cards) /#/
Repro Have recent recipients with IBANs whose length isn't a multiple of 4: UK, German and Irish IBANs (22 chars), French (27). Here the stubbed GET /api/v1/dashboard beneficiaries use DE89370400440532013000, GB29NWBK60161331926819 and FR1420041010050500013M02606. Open the dashboard.
Cause The card stores the display-formatted IBAN (Recipient.getFormattedIBAN adds a space every 4 characters) and then passes it to anonymise(), which takes slice(-4). For IBANs not divisible by 4, the last group is short and the 'last four' includes the grouping space. The twin in ct-recipient-list (the same PR) masks the raw IBAN, so it's correct.app/frontend/application/src/app/dashboard/components/recipient-card/recipient-card.component.ts:57app/frontend/application/src/app/dashboard/components/recipient-card/recipient-card.component.html:10
Fix Mask the raw value: anonymise(recipientInfo.beneficiary.iban, 'iban'), or strip spaces before slice(-4).
Introduced 2026-05-29 · 8fda4685e · dgarvanski · #5529 [CT-4102] Riva integration (commit '[RECIPIENT] Anonymise recipient account details') · in production
mediumSettings, onboarding & refer480, 540, 600re-checked
Phone-upload QR card collapses between 480px and ~700px: text squeezed to 2px, Refresh button overflows
The phone illustration keeps its fixed 244px width beside the text, so the text column shrinks. At 480px the column is 2px wide: 'Continue on phone' and the description print one word per line and are cut off at the card edge ('Conti', 'phone', 'Refre'). At 600px the 'Refresh QR code' button is 120px wide for 141px of content, so its icon sticks 20px out of the left edge and its label runs 20px past the right edge.
Measured Text column width: 2px at 480, 62px at 540, 122px at 600, 222px at 700 and above (fine). Refresh button at 600: clientWidth 120, scrollWidth 141, icon 20px outside the left edge, label 20px outside the right edge. At 480 the title's scrollWidth is 68 in a 2px box. At 479 and below the card stacks and is fine.
Where Documents > Continue on your phone (QR code card) /#/documents/phone/qr
Repro Open /#/documents/phone/qr in a window 480-699px wide (tablet-sm, collapsed sidebar). The same happens with a working QR code, because the Refresh button is always shown.
Cause .document-phone-preview is flex: 0 0 244px and .document-phone-qr-text is flex: 1 1 auto; min-width: 0, so the text column absorbs all the shrinkage. The override that stacks the card (.document-phone-qr-content { flex-direction: column }) sits only in the $min-phone..$max-phone (<=479px) block. PR #5678 moved the sibling document layouts (.upload-methods, .document-preview-frame) to $min-phone..$max-tablet-sm (<=767px) but left the QR card at <=479px. That is the 'one variant updated, the other not' pattern.app/frontend/application/src/app/registration/pages/supporting-documents-page/supporting-documents-page.component.scss:267app/frontend/application/src/app/registration/pages/supporting-documents-page/supporting-documents-page.component.scss:357app/frontend/application/src/app/registration/pages/supporting-documents-page/supporting-documents-page.component.scss:1043app/frontend/application/src/app/registration/pages/supporting-documents-phone-qr-page/supporting-documents-phone-qr-page.component.html:57
Fix Move .document-phone-qr-content { flex-direction: column; align-items: flex-start; } from the <=479px block into the existing $min-phone..$max-tablet-sm block, next to .upload-methods.
Introduced 2026-08-26 · d457b557c · dgarvanski · #5658 [SUPPORTING-DOCS] Add new supporting documents flow · in production
mediumSettings, onboarding & refer390, 600, 768, 1024, 1440
Document list truncates document names ('Memorandum and Ar…'); the phone fix was applied only to the Options page
Each status row forces its title (and description) onto one line with an ellipsis. On a phone, company documents become 'Memorandum and Ar…' and 'Certified Register of Dire…', so the list meant to tell the user which document to upload hides the document's name. Long titles are cut at every width.
Measured 390px: 'Memorandum and Articles of Association' shows 164 of 292px; 'Certified Register of Directors, Shareholders and Persons with Significant Control' shows 200 of 582px. 600px: 274/292 and 310/582. 1440px: 410/582.
Where Verification documents list (status rows) /#/documents and /#/documents/required
Repro Stub /api/v1/supporting_documents with realistic company documents, e.g. 'Memorandum and Articles of Association' and 'Certified Register of Directors, Shareholders and Persons with Significant Control'. Open /#/documents/required at 390px.
Cause .document-status-title and .document-status-description are white-space: nowrap; overflow: hidden; text-overflow: ellipsis, with no title attribute. Commit 580043b4e (PR #5678) added a phone override (white-space: normal) for the twin rows on the Options page (.accepted-document-title/.accepted-document-description) but not for the status rows.app/frontend/application/src/app/registration/pages/supporting-documents-page/supporting-documents-page.component.scss:58app/frontend/application/src/app/registration/pages/supporting-documents-page/supporting-documents-page.component.scss:67app/frontend/application/src/app/registration/pages/supporting-documents-page/supporting-documents-page.component.scss:1028app/frontend/application/src/app/registration/pages/supporting-documents-list-page/supporting-documents-list-page.component.html:40
Fix Add .document-status-row .document-status-title, .document-status-row .document-status-description { white-space: normal; } next to the .accepted-document-title phone rule (ideally at every width).
Introduced 2026-08-13 · a47751c11 · dgarvanski · #5658 [SUPPORTING-DOCS] Add new supporting documents flow · in production
lowChrome & navigation600, 768, 1024, 1440
Search placeholder reads 'Search "Search for a recipient"'
Every rotating hint doubles the word: 'Search "Search for a recipient"', 'Search "Search for an account number"', and so on.
Where Header search box (focused) /#/ (any)
Repro Click into the header search box. The rotating placeholder hints appear. The real /api/v1/search/history meta was reproduced in the stub.
Cause The frontend wraps each recommendation as Search "${recommendation}". That was fine for the original values ('EUR', '100000'). The API was later changed to send full sentences that already start with 'Search for …', and the wrapper was left as it was.app/frontend/application/src/app/search/components/header-search-bar/header-search-bar.component.ts:90app/controllers/api/v1/search_controller.rb:43-44
Fix Push recommendation as-is in header-search-bar.component.ts:90, or send bare terms from the API again.
Introduced 2025-06-11 · df795f108 · Stevan Litobac · #5243 CT-3953: [SEARCH] Update to Search for Web App · in production
lowChrome & navigation600, 768, 1024
Sign-up page: the default testimonial's last line runs into the author name (600–1199px)
The quote's last line, 'kind.', prints on top of the bold 'Relocation' label. The four other testimonials are shorter and clear it, but Amy N shows first on every load.
Measured At 600, 768, 900, 1024 and 1199px, the text bottom is 7px below the top of the name block. At 1200+ it clears by 13px, because the card is taller there (275 vs 230px).
Where Sign-up page (logged out), testimonial card /sign-up
Repro Open /sign-up at any width from 480 to 1199px (the card sits below the form) and look at the first testimonial (Amy N).
Cause The quote flows from the top, while the author block is position: absolute; bottom: 13px at tablet widths. The card is only min-height: 230px there, so the author block doesn't push the card taller. Six lines of 18px/28px text reach down into it.app/frontend/application/src/assets/styles/authentication/authentication-styles.scss:152-155app/frontend/application/src/assets/styles/authentication/authentication-styles.scss:187-196app/frontend/application/src/assets/styles/authentication/authentication-styles.scss:182-184
Fix Keep the author row in the flow (drop position:absolute; the container is already flex column space-between), or reserve room with padding-bottom.
Introduced 2026-03-27 · 6192eac07 · dgarvanski · #5463 CT-4072: [SIGN UP PAGE] Update the design of the web app sign up page · in production
lowChrome & navigation1024, 1440
Notification tray always shows an empty scrollbar track
A grey, bordered 12px scrollbar track runs down the right side of a list that doesn't scroll. It also narrows the text, so 'CT-262-8841' breaks after 'CT-'.
Measured Tray .content: offsetWidth − clientWidth = 12px, scrollHeight 222 = clientHeight 222 (nothing to scroll).
Where Notification tray (desktop/tablet dropdown) /#/ (bell)
Repro Open the tray with only a couple of notifications, in a browser that draws real scrollbars (Windows Chrome or Edge, or any browser here since the tray styles ::-webkit-scrollbar). Headless Playwright hides scrollbars, so this was checked with --hide-scrollbars turned off.
Cause .content uses overflow-y: scroll, which always reserves the scrollbar, not auto. The custom ::-webkit-scrollbar track style (≥480px) then draws it with a border and background.app/frontend/application/src/app/notification/notification-list/notification-list.component.scss:16-33
Fix Change overflow-y: scroll to overflow-y: auto (line 17).
Introduced 2018-03-12 · 13f17a72c · Henrique Lobato Zago · #2011 [Notification] Fix notification responsive styles · in production
lowTransfers & quotes390, 600, 768, 1024, 1440re-checked
Quote timer and sell amount lost their alignment: text-right/text-left no longer exist
'Quote expires in: 12s' is meant to be right-aligned above the time bar. It is left-aligned, and on a 390px phone it touches the left screen edge (x=0). On desktop the 'Your Account' block is meant to hug the arrow but is left-aligned.
Measured 390px: timer text 0-126px, text-align start, bar 0-390. 1440px: timer text 443-569 inside a 443-1255 bar; sell block text-align start. No loaded stylesheet has a .text-right or .text-left rule; only .text-align-right/.text-align-left and .text-center exist.
Where Quote results /#/quotes/:id
Repro Get quotes (stubbed quotes) and look at 'Quote expires in' and at the 'Your Account' amount on a card.
Cause The templates use Bootstrap's text-right/text-left. #4334 removed @import 'bootstrap' from application_users.scss and re-created only some utilities in the Angular global styles (.text-center plus the app's own .text-align-*), so these two classes have matched nothing since.app/frontend/application/src/app/trade/pages/quote-book-page/quote-book-page.component.html:84app/frontend/application/src/app/trade/components/quotation/quotation.component.html:10app/frontend/application/src/app/trade/components/quotation/quotation.component.html:26app/frontend/application/src/assets/styles/utils/layout.scss:477-487
Fix Swap text-right/text-left for text-align-right/text-align-left in the two templates, or alias the Bootstrap names in utils/layout.scss.
Introduced 2023-02-22 · 1bc6b1bd2 · dgarvanski · #4334 [STYLING] Transfer Bootstrap styles to the global CSS · in production
lowTransfers & quotes390
Settlement details on phones: IBAN runs into its copy icon and shifts the column divider
'GB16TCCL12345609813516' sits directly against the copy icon with no gap, and the IBAN row's vertical divider is 3px left of the divider in every other row, so the table looks broken. Longer IBANs (up to 34 characters) push it further.
Measured 390px: divider x=128.2 in the IBAN row vs 131.5 in the other 8 rows; IBAN text right edge = copy icon left edge = 348.8 (0px gap); value min-content 253px vs 249.5px box.
Where Transfer page, Make Bank Transfer > Settlement Account Details /#/trades/:id
Repro Open a transfer with a UK IBAN settlement account (real dev data: /#/trades/de2b9921-bad6-4dce-8d4c-42fa6f508330) on a 390px phone and scroll to the IBAN row.
Cause Each row is its own flex container with .property flex 1 and .value flex 2.4, but .value keeps min-width:auto. Since #3669 the value holds the unbreakable IBAN plus a ct-copy button laid out with space-between and no gap. Its min-content is wider than its share of the row, so that row grows the value column (moving the divider) and leaves zero space before the icon.app/frontend/application/src/app/trade/components/bank-account-table/bank-account-table.component.scss:40-41app/frontend/application/src/app/trade/components/bank-account-table/bank-account-table.component.html:96-98
Fix In .ct-detail .value add min-width: 0 and a gap (8px), and let long values break (overflow-wrap: anywhere) so every row keeps the same column split.
Introduced 2022-01-26 · 8dfddc234 · Deyan Garvanski · #3669 CT-2813: [TRADE CONFIRMATION] Add copy links to the Settlement Account Details · in production
lowTransfers & quotes390, 1024
'Allocate funds to <recipient>' title uses 58px lines when the name wraps
The step title is built as 'Allocate Funds to ' + nickname and keeps the single-line step-title line-height, so each wrapped line is 58.5px tall. On a phone the title becomes four widely spaced lines taking 234px, with Cancel floating in the middle. On 1024px it takes two lines with a large gap.
Measured font-size 18px, line-height 58.5px (3.25). Title height 234px (4 lines) at 390px, 117px (2 lines) at 1024px.
Where Transfer page, allocating a payment to a recipient /#/trades/:id (Allocate Recipient > pick a recipient)
Repro Open an unallocated transfer (/#/trades/71aebc2a-09d5-4ebd-9bc6-5a6931f54e29), click Allocate Recipient, pick a recipient whose nickname is long (stubbed: 'Guangzhou Pearl River Delta Precision Manufacturing Co Ltd'). Nothing is submitted.
Cause .transfer-title uses line-height: 3.25 to give single-word step titles ('Allocate Recipients') a 58px row. The allocate-funds title interpolates a free-text recipient nickname into the same element, so wrapped lines inherit the 58px line box.app/frontend/application/src/assets/styles/global.scss:270-274app/frontend/application/src/app/trade/pages/recipients-allocate-page/recipients-allocate-page.component.ts:128
Fix Give .transfer-title a normal line-height (about 1.3) with padding or min-height for the 58px row, or truncate the nickname with an ellipsis.
Introduced 2020-03-16 · 4e8a3943b · Deyan Garvanski · #2849 CT-2500: [STYLING] Remove route specific classes · in production
lowTransfers & quotes390
Make a Transfer: long reasons run under the pencil icon
The end of the reason text is drawn underneath the pencil icon at the right of the field ('INV-2292' is overprinted), because the input has only 10px right padding and the icon sits 15px from the edge. The delivery date field has the same icon layout.
Measured Input 8-382 with padding-right 10px; icon 352.8-367; text ends at x=359, i.e. 6px under the icon; input scrollWidth 377 > clientWidth 374.
Where Make a Transfer (new quote form) /#/quotes/new
Repro At 390px type the reason 'Payment for invoice INV-2291 and INV-2292' and leave the field.
Cause .ct-md-input input has padding 24px 10px 10px while the .md-icon is absolutely positioned at right: 15px, inside the input's text area, so there is no room reserved for it.app/frontend/application/src/app/trade/trade.scss:500app/frontend/application/src/app/trade/trade.scss:515-518
Fix Give inputs followed by .md-icon padding-right: 36px (or so).
Introduced 2021-02-02 · 9f7d257fa · Deyan Garvanski · #3202 CT-2658: [SCSS] Clean up old styles · in production
lowRecipients, dashboard & alerts390, 768, 1440re-checked
Recipients list: invited recipients have no icon and their name is out of line
The 'Pending Recipient' row has an empty space where the person icon should be, and its name starts 34px left of every other name in the list.
Measured Icon ::before content: none, width 0. Name left edge: 168px vs 202px on other rows (768), 530 vs 564 (1440), 123 vs 141-157 (390).
Where Recipients Overview list (ct-recipient-list) /#/recipients
Repro Have a recipient invited by email who hasn't added bank details yet (type null, status pending; stubbed in GET /api/v1/beneficiaries?per_page=all). Open /#/recipients.
Cause The fallback icon for a recipient with no type is 'ct-icon-pending-individual', a class that has never existed in currencytransfer-icons.css. The font has ct-icon-profile-pending-individual and the older ct-icon-pending-recipient. The same commit styled .ct-icon-profile-pending-individual, so the fallback is a typo. The code was later moved into the shared list component (e475d3166, 2023-06-01).app/frontend/application/src/app/trade/components/recipient-list/recipient-list.component.ts:136
Fix Use 'ct-icon-profile-pending-individual' (or 'ct-icon-pending-recipient') as the fallback.
Introduced 2022-07-26 · a5ab5dcc5 · Deyan Garvanski · #4009 CT-2914: [APPROVAL] UI for reviewing recipient changes · in production
lowRecipients, dashboard & alerts768
Recipient detail: calendar icon covers the end date in the date-range filter at 768px
The end date reads '30 Sep 202' and the calendar icon sits on top of the last digit. At 390-600px the field is full width, and at 1024px and above it's wide enough.
Measured 768px: form field is 234px (35% of 668px). The end input is 84px wide for 85px of text, the text ends at x=290, and the icon starts at x=287. At 1024/1280/1440px the field is 291px and the text clears the icon by 54px.
Where Recipient detail (payment history) > 'Filter by date range' /#/recipients/:id
Repro Open any recipient's detail page at 768px wide and look at the default date range (30 Sep 2025 - 30 Sep 2026).
Cause width:35% applies from 480px up. .mat-date-range-input is width:calc(100% + 35px), deliberately running under the suffix icon, so on the narrower tablet-lg container two dates plus the icon don't fit. The 2021 width rule only targeted the legacy .mat-form-field, which the MDC field doesn't have. PR #5513 re-pointed it at .mat-mdc-form-field and removed the wrapper's max-width.app/frontend/application/src/app/recipient/pages/recipient-overview-page/recipient-overview-page.component.scss:112app/frontend/application/src/app/recipient/pages/recipient-overview-page/recipient-overview-page.component.scss:199
Fix Give the field a min-width that fits both dates plus the icon (about 260px), or only apply 35% from 992px up. Also drop the +35px overflow on .mat-date-range-input.
Introduced 2026-05-12 · c37a178e4 · dgarvanski · #5513 [FORMS] Fix Material datepicker styles · in production
lowRecipients, dashboard & alerts390
Approvals on phone: payment rows get a stray underline between recipient name and reference
Under each payee name there's a short grey rule and a 15px gap before the '- INV-2291' reference, which reads like an underline. It's a separator meant for the full-width market-order rows. The payment rows got no phone layout of their own, so the name column is also squeezed to about 100px.
Measured 390px: payment .ct-recipient-reference has border-top 1px solid and padding-top 15px across only 96-104px of a 360px row. It's 0px at 600px.
Where Approvals > Payments Awaiting Approvals (and the approve/reject modals, which reuse the class) /#/approvals
Repro With payment approvals pending (stubbed GET /api/v1/pending_approvals), open /#/approvals on a phone (<=479px).
Cause PR #4479 gave the market-order approval rows a stacked phone layout. That added a phone-only border-top and padding to .ct-recipient-reference, a class the payment rows (line 141) and both modals (lines 298, 345) share. In the payment rows the reference sits in a narrow text column, so the separator shows up as a partial underline.app/frontend/application/src/app/approvals/approvals.scss:80app/frontend/application/src/app/approvals/approvals.scss:82app/frontend/application/src/app/approvals/pages/approvals-list-page/approvals-list-page.component.html:141
Fix Scope the rule to market orders: .market-order-list-item .ct-recipient-reference { ... } inside the phone breakpoint.
Introduced 2023-06-06 · 84ddd488b · dgarvanski · #4479 CT-3169: [APPROVALS] update to the approving market orders to include RSI targets · in production
lowRecipients, dashboard & alerts390, 1440
Dashboard recipient card: hover overlay squares off the rounded corners
The white 'Make a payment' overlay is a plain rectangle, so on hover it paints over the card's 12px rounded border and the card suddenly has square corners.
Measured Card border-radius 12px with overflow visible. Overlay: 284x119 at inset 1px, border-radius 0, rgba(255,255,255,.9).
Where Dashboard > Quick access to recent recipients (hover 'Make a payment') /#/
Repro Hover any recent-recipient card on the dashboard.
Cause PR #5161 restyled the card with border-radius:12px but didn't touch the 2018 .card-overlay (or the .placeholder:after overlay). The card doesn't clip its children.app/frontend/application/src/app/dashboard/components/recipient-card/recipient-card.component.scss:15app/frontend/application/src/app/dashboard/components/recipient-card/recipient-card.component.scss:101
Fix Add border-radius: inherit to .card-overlay and .placeholder:after, or overflow: hidden on .recipient-card-container.
Introduced 2025-02-07 · 3f95cb14d · dgarvanski · #5161 [DASHBOARD] Style dashboard elements · in production
lowRecipients, dashboard & alerts390, 1440
EURC shows Ascension Island's flag instead of a coin icon
USDC and USDT get their coin icons, but EURC shows a British-territory flag (Ascension Island).
Measured .cflag.cf-eurc has no background-position rule, so it uses the sprite's top-left tile (0 0 = .cf-ac, Ascension Island).
Where Balances (group header, filter, expanded row); any .cflag cf-eurc, e.g. recipient rows /#/balances
Repro Have an EURC balance: EURC is a supported crypto currency in the dev DB's /api/v1/currencies/supported. Open /#/balances or the currency filter.
Cause PR #4202 added sprite tiles and classes for btc/eth/usdt/usdc but none for EURC, and .cflag's default background position is top left.app/frontend/application/src/assets/styles/utils/flags.scss:964app/frontend/application/src/assets/styles/utils/flags.scss:968
Fix Add an EURC tile to currency-flags-sprite.png plus &.cf-eurc { background-position: ... }. Better still, make the default an empty or neutral tile rather than a real flag.
Introduced 2022-11-21 · 36f716427 · dgarvanski · #4202 [STYLING] Update flag sprites and fonts · in production
lowSettings, onboarding & refer390
On phones, settings intros, section titles and the Add button touch the screen edge
Intro paragraphs and blue section titles start at x=0, flush against the left edge of the screen. On Authorised Users the 'ADD' button runs to the right edge. On Automated Settlement and Connect Account the page title also touches the edge. The page titles on the other screens keep a 15px inset, so each page looks misaligned.
Measured An automated scan at 390px found text with left edge = 0px on 12 routes (26 text elements) (e.g. /#/notifications: intro plus 4 section titles; /#/accounts/automated: h1, intro, 'Connected Accounts', 'Disconnected Accounts'). The Authorised Users 'ADD' button's right edge is at 390 of 390px.
Where Linked Accounts, Email Notifications, Marketing Emails, Reward Payments ('Rewards History'), Authorised Users, Automated Settlement (list, Connect Account, connection detail) /#/sso, /#/notifications, /#/marketing, /#/rewards, /#/accounts/api, /#/accounts/authorised, /#/accounts/authorised/edit/:id, /#/accounts/delete, /#/accounts/automated, /#/accounts/automated/connect, /#/accounts/automated/view/:id, /#/referral ('Rewards FAQs')
Repro Open any of the listed routes at 390px wide (anything <=479px).
Cause At $min-phone..$max-phone, .ct-page-content becomes full-bleed (max-width: 100%; margin: 30px 0). White cards cope because they have inner padding, but .ct-card.transparent-container has none. The settings redesign puts bare <p>, .section-title and buttons straight into those transparent containers, so on phones they touch the screen edge. The Automated Settlement pages also remove the title's own padding with no-padding-title.app/frontend/application/src/assets/styles/utils/layout.scss:393app/frontend/application/src/app/settings/settings.scss:766app/frontend/application/src/app/settings/profile-settings/pages/sso-accounts-page/sso-accounts-page.component.html:11app/frontend/application/src/app/settings/account-settings/pages/automated-settlements-page/automated-settlements-page.component.html:73
Fix In layout.scss's phone block, add &.transparent-container { padding-left: 15px; padding-right: 15px; } to .ct-page-content (and drop no-padding-title below 480px).
Introduced 2026-01-30 · 925fac362 · dgarvanski · #5395 CT-4051: [API][WEB] Change the manage account endpoint · in production
lowSettings, onboarding & refer390, 600
Account initials circle squashes into an oval when the account name wraps (fixed-height band)
The 'HW' initials circle is squeezed into an oval, and the initials touch its sides. The band is a fixed 70px, so the wrapped name and the sub-text fill it. If the sub-text also wraps (e.g. a long holder name), the text touches the band's top and bottom edges.
Measured 390px, company name plus holder name: avatar 26.4x32px instead of 32x32, text block 54px tall in a 50px content box (7.8px gaps). With a 2-line sub-text: gaps 0px, and the name starts 1px above the band. Short names are fine: 32x32, 17px gaps.
Where Settings hub (account band above 'Manage Account') and Manage Account header /#/settings, /#/accounts
Repro Stub /api/v1/accounts so the current account is a company with a realistic long name, e.g. 'Harrington-Whitfield International Commodities Trading & Logistics Ltd'. Open /#/settings at 390px and scroll to the account band.
Cause .ct-settings-account-container has height: 70px rather than a min-height. .account-initial sets width: 32px; height: 32px but keeps the default flex-shrink: 1, so once the name column wants more room, the flex row shrinks the circle down to its text width (26px).app/frontend/application/src/app/settings/settings.scss:14app/frontend/application/src/app/settings/settings.scss:21app/frontend/application/src/app/settings/profile-settings/pages/profile-settings-page/profile-settings-page.component.html:126app/frontend/application/src/app/settings/account-settings/pages/account-page/account-page.component.html:17
Fix .account-initial { flex-shrink: 0; } and min-height: 70px instead of height: 70px on .ct-settings-account-container.
Introduced 2026-01-21 · 371bf0495 · dgarvanski · #5395 CT-4051: [API][WEB] Change the manage account endpoint · in production
lowSettings, onboarding & refer390, 600
Linked Accounts: a long Google email pushes the Disconnect (trash) icon outside the row
The trash icon is pushed past the row's right edge and the divider line, out of line with the Apple row's 'CONNECT'. At 390px its link box reaches 394px, past the viewport. Emails of about 40+ characters trigger it.
Measured 390px: row right edge 359, delete link right edge 394 (35px overflow; viewport 390), icon right edge 379 vs CONNECT 349. 600px: 29px overflow. 768px and above: fits.
Where Settings > Linked Accounts /#/sso
Repro Stub /api/v1/oauth_providers with Google linked to a long address, e.g. accounts.payable.department@harrington-whitfield-logistics.co.uk. Open /#/sso at 390px or 600px.
Cause The provider/email column is a flex item with the default min-width: auto, so it can't shrink below the email's longest unbreakable run (up to the hyphen). The 48px .delete-link (15px padding on each side) is pushed out of the space-between row instead of the email wrapping.app/frontend/application/src/app/settings/profile-settings/pages/sso-accounts-page/sso-accounts-page.component.html:27app/frontend/application/src/app/settings/settings.scss:221
Fix Give the provider/email column min-width: 0 and the email overflow-wrap: anywhere, and give .delete-link flex-shrink: 0.
Introduced 2023-02-07 · a49bafb01 · dgarvanski · #4316 [PROFILE] Migrate Profile Settings and Manage Accounts to Angular · in production