Bug: Fix issue with wrapping certificate

[Ririio]

This issue should close #560

Here's a demo on how it looks

2023-04-12.13-52-19.mp4

[humphd]

This is still broken for me on Mac

[Ririio]

This is still broken for me on Mac

That's odd... on windows for mine everything seems to be fine, do you mind providing me with the width and height, just so I can be sure

[humphd]

Let's get some other people to test too.

[Eakam1007]

Tested this on Windows 11, and looks good:

(Unrelated) Though I noticed this happening for smaller screen sizes such as Galaxy Fold (280 x 653, w x h):

[SerpentBytes]

I think it's not working on Mac.

[humphd]

Weird that it's no good on Mac. If it works well on Windows, that's the most important (more users on Windows). If we can fix on mac, that would be nice to have.

[Ririio]

(Unrelated) Though I noticed this happening for smaller screen sizes such as Galaxy Fold (280 x 653, w x h):

@Eakam1007 I think that has something to do with the "Tabs" component

[humphd]

I tried working on this locally on my Mac, and this seems to do it:

diff --git a/app/components/certificate/certificate-display.tsx b/app/components/certificate/certificate-display.tsx
index c80b76a..d499e86 100644
--- a/app/components/certificate/certificate-display.tsx
+++ b/app/components/certificate/certificate-display.tsx
@@ -110,8 +110,9 @@ export default function CertificateDisplay({
               <Text
                 fontFamily="mono"
                 maxWidth={{ base: '2xs', xs: 'sm', sm: 'md', md: 'full' }}
+                minWidth="max-content"
                 fontSize={{ base: '3xs', xs: '2xs', sm: 'xs', md: 'md' }}
-                css={{ whiteSpace: 'pre-line' }}
+                css={{ whiteSpace: 'pre-line', wordWrap: 'normal' }}
               >
                 {value}
               </Text>

Here I'm telling it to not wrap text, and also to never go narrower than the content. Does this work?

[Ririio]

I tried working on this locally on my Mac, and this seems to do it:

Here I'm telling it to not wrap text, and also to never go narrower than the content. Does this work?

It didn't cause any issue when I tested it locally, should I push this code or have some who uses mac try out the changes for themselves?

[humphd]

If it worked for you, sure, make the changes and add another commit to this PR.

[Ririio]

@SerpentBytes do you mind checking the new commit to see if it works on Mac now?

[Genne23v]

It works all good on my Mac. It doesn't break in any viewpoint or different device view.

[Eakam1007]

Looks good. I think we will need another issue to fix the tabs staying horizontal for smaller displays

[SerpentBytes]

It works!