Column width in report log tab

[therealryan]

Long log messages extend off the edge of the screen. This would be fine but the scroll bar is also hidden off the screen at the bottom of the table.

Long messages should word-wrap to fit in the screen or the scrollbar should always be visible (or both, controlled by some checkbox somewhere)

[Chaitu-Tatipamula]

please provide a screenshot ar somethin i think i couls fix this..!

[therealryan]

Hi!

I've created a branch that shows the problem. You should be able to:

• check out the issue_261_demo branch
• go to the report/report-ng module
• run ng serve --open - a browser should open
• Click on the "Logs" tab

to recreate the below steps (I did take screenshots, but the upload to github is failing for some reason).

1. Base state: make the window wide enough that the first log message is shown on one line
2. Now make the window narrower - just wide enough that the second line is still completely visible. Notice that the first line has been word-wrapped so we still see all of that content.
3. Now make the window narrower again. You'll find that:
   • The second line is not word-wrapped. We can no longer see the interesting_content! at the end!
   • The first line has stopped wrapping at the length of the second line. We're missing content here now too!
   • The horizontal scrollbar is off the screen, down at the bottom of the table. To see the interesting_content! we'd have to scroll down to reveal the horizontal scrollbar, use that to scroll across, then scroll back up.

In the course of recreating this issue I tried adding the word-wrap: break-word CSS property to the element, but it didn't have any noticeable effect.

I think the preferred solution would be to get long lines to wrap even when there aren't any word boundaries. Second best would be to ensure that the horizontal scrollbar is shown at the bottom of the screen rather than the bottom of the table.

Let me know if this isn't clear!

Cheers!

[Chaitu-Tatipamula]

@therealryan i was unable to set this up on my local machine how can i run this can you help me im new to this

[Chaitu-Tatipamula]

@therealryan ng serve --open this thing wasn't working

[therealryan]

No problem! Here's a list of from-scratch instructions:

1. Install a JDK (minimum version 8 )
2. Install maven
3. Install node
4. Install yarn
5. install the angular cli tools
6. Clone this project
7. Check out the issue_261_branch
8. go to the report/report-ng directory
9. run ng serve --open

I see that ng serve --open is failing for you. What is the error message that you're getting?

[Chaitu-Tatipamula]

ng : The term 'ng' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1

• ng serve --open
• ~~
  • CategoryInfo : ObjectNotFound: (ng:String) [], CommandNotFoundException
  • FullyQualifiedErrorId : CommandNotFoundException

something like this

[therealryan]

OK, that indicates that the angular cli tools are not installed. Check the link on step 5 in the list above.

[Chaitu-Tatipamula]

OK, that indicates that the angular cli tools are not installed. Check the link on step 5 in the list above.

yes im doing it thanks for guiding
basically what this project is about

[Chaitu-Tatipamula]

@therealryan finally tthe thing opened but i dont know where to start in the project codebase
i got this how to fix but i donno where to fix it in the repo

[therealryan]

Hmm. I've not seen that before.

It's probably worth checking if this is a problem for all angular applications on your system or just this one.

Have a go at generating a fresh new project:
https://angular.io/cli#basic-workflow

and see if that builds ok.

[Chaitu-Tatipamula]

build was successfully done and the browser also opens with 2 lines
but the actual doubt for me is that where to actually change or i cant find the source at which this issue was there

[therealryan]

Ah great! The fix is almost certainly in the files in this directory:
https://github.com/Mastercard/flow/tree/main/report%2Freport-ng%2Fprojects%2Freport%2Fsrc%2Fapp%2Flog-view

I've clocked off for the day now so I'll be of no help till tomorrow, but have a play around with those files (the ng serve command should reflect any changes you make into your browser almost immediately).

[Chaitu-Tatipamula]

@therealryan canot find it in those directories even i searched for the class name _ngcontent-tgy-c36 in vs code no results

[Chaitu-Tatipamula]

@therealryan i've got it and fixed, made a scroll bar right bottom of the 2nd line is that ok

[therealryan]

@Chaitu-Tatipamula I tried out the change you made in #264, but unfortunately I don't think it addresses the problem.
I've added a new commit on the issue_261_branch that advances us a tiny bit - adding overflow-wrap: break-word on the element does get us the wrapping behaviour that we want, but only when the element is not in a table. So it looks like the issue lies with the table styling or some interaction thereof - perhaps I was optimistic when I added the good-first-issue tag on this one...

If you're still looking for a contribution you could make I've just added #265 - I'm pretty sure that will be easier to solve.

[Chaitu-Tatipamula]

is this not the thing we have to do

[Chaitu-Tatipamula]

commit #265 would fix this