fix: bills explore table styles #161
Conversation
| @@ -180,19 +180,19 @@ | |||
| </div> | |||
| <svelte:fragment slot="table" let:cellKey let:cellValue> | |||
| {#if cellKey === 'proposedOn'} | |||
| <span class="body-compact-01 text-gray-60" | |||
| >{new Date(cellValue).toLocaleString('th-TH', { | |||
| <div class="body-compact-01 w-20 text-gray-60"> | |||
There was a problem hiding this comment.
We better not fix the width, because some users might set font size higher than usual (my parents did) and fixing the width won't guarantee that text will be in the same line.
I suggest you to use whitespace-nowrap (CSS white-space: nowrap;) instead.
There was a problem hiding this comment.
Oh, I missed the point, and I understand your concerns. I’ve encountered many users who use a large font size on their machines.
I can ensure that w-20 (which applies width: 5rem) will be responsive to the browser's root font size because it uses rem.
Therefore, should I add whitespace-nowrap and adjust the width for the cell?
If you have any specific preferences such as width, please let me know.
There was a problem hiding this comment.
That is a good point, however, I still suggest using nowarp solution. Because it will guarantee that the cell width will just fit the one-line text, no more no less. And no need for us to try picking the closest width that works.
What have been done
I updated the width of the
proposedOncell in the Bills Explore page to ensure the text stays on one line for small screen. Additionally, I removed the margin from theBillStatusTagto align it with the content.Screenshot (if any)
If you have any feedback or suggestions, please let me know.