Fixing some display issues on smaller screens on the transaction rows
Details
Details
- Reviewers
bytesofman - Group Reviewers
Restricted Project - Commits
- rABCfd87bb794a07: [cashtab] Mobile style fixes
Preview the site and check transactions, especially token info and messages, look good on small screens
after
before
Things to note:
Losing the tx icon and token image/icon at very small screens to allow other content to fit nicer
margins and padding tightened up
Diff Detail
Diff Detail
- Repository
- rABC Bitcoin ABC
- Branch
- cashtab-mobile-tx-row-style-fixes
- Lint
Lint Passed - Unit
No Test Coverage - Build Status
Buildable 33139 Build 65761: Build Diff cashtab-tests Build 65760: arc lint + arc unit
Event Timeline
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-cashtab) passed.
Preview is available at http://51.68.37.192:41958 for the next 60 minutes.
| cashtab/src/components/Home/Tx/styled.ts | ||
|---|---|---|
| 264–266 ↗ | (On Diff #53709) | I don't think we can just lose these -- the issue is a cashtab msg can include, say, a txid or an ecash address, and without break-all this just bonks the whole display |
| 303 ↗ | (On Diff #53709) | is 500px where we start to see issues? would be nice to not lose the icons, they do distinguish between a wide range of tx types. can we just make them smaller? |
Comment Actions
use stadard breakpoint, get icons back and line breaks back. Make icons much smaller and stack where needed
| cashtab/src/components/Home/Tx/styled.ts | ||
|---|---|---|
| 231 ↗ | (On Diff #53711) | can we really lose this? none of these break-alls appeared spontaneously; it's always something that is added bc there is some hideous css bug where a long string overflows the whole screen |
Comment Actions
airdrops not flexing well
even on desktop:
we should not need a whole new line just for the ticker
Comment Actions
without break-all (current diff)
with break-all
with break-all is pretty awful. but we need break-all bc token names can be very long, which would mess everything up.
- get rid of break-all for the columns that do not take "could be anything" user input
- for the column with token name, cut it off with ellipsis instead of breaking
Comment Actions
dont word break on less than 10 length name or tickers, but do always word break in the amount column since it could be a big number
| cashtab/src/components/Home/Tx/index.tsx | ||
|---|---|---|
| 728 ↗ | (On Diff #53740) | ++ linking break-all to the length of the "problem" string  need to implement here (i.e. the right-most column in this screenshot) so we aren't cutting off shorter tickers when there is plenty of room to break normally |
Comment Actions
alt approach would be to have a function prepareWrappedString that takes a string and maxChars as params, and returns the string truncated to maxChars
e.g. prepareWrappedString(tokenTickerThatIsTooLong, 10) = "tokenTi..." (keeps it to 10 chars max including the ellipsis)
| cashtab/src/components/Home/Tx/styled.ts | ||
|---|---|---|
| 327 ↗ | (On Diff #53740) | we can't just "not word break" here, bc the token name / ticker could be very long and require word break |
Comment Actions
Sure thats a good idea, but maybe out of scope for this diff. Can add it next. Main goal here is to patch the mobile issues that were reported
Comment Actions
Re: the changes requested. It still has the word break applied if the name is long
That rule was added to always word break that column in case of a long number amount