added user layout interaction support

[limesTech]

Summary of Changes

Closes #278
Added a Callback function to divider to enable users to change viewport ratio between LogDetailsContainer and LogDetailsContainer

Visual Inspection

• Conformance to Markdown styles: https://olog.esss.lu.se/Olog/help/CommonmarkCheatsheet
  • ...when viewing a log entry
  • ...when previewing HTML while writing a description
  • ...when viewing a log entry in the group view
• Scroll is possible (elements don't overflow their container, and they are scrollable)
  • ...search result list
  • ...log entry group view list
  • ...log entry single view
  • ...create new log entry page
• Overall layout fills full width and height of viewport
• Pagination element doesn't overflow into other elements

[maxfrederiksen-ess]

We actually just recently created a ticket for this ourselves. So i'm happy you have made an implemention. However it seems overly complex and I think it could be made a lot simpler by using this NPM package: https://www.npmjs.com/package/re-resizable

If you want to have a crack at it that would be great. Also please convert back the functions to arrow functions :)

[limesTech]

We actually just recently created a ticket for this ourselves. So i'm happy you have made an implemention. However it seems overly complex and I think it could be made a lot simpler by using this NPM package: https://www.npmjs.com/package/re-resizable

If you want to have a crack at it that would be great. Also please convert back the functions to arrow functions :)

Was a quick and dirty version from yesterday. Thx for the hint to the re-resizable package. Looks great, but i will need to test if it will break the current full width/hight grid.

Will test it on Thursday. Until then feel free to PR your own and will vote which will create cleaner code.

[limesTech]

@maxfrederiksen-ess ready for review. Using re-resizable, it produced much cleaner code. ;)

[maxfrederiksen-ess]

Great!

I took at quick look at this and it works a bit better but still far from complete. Here are some points I noticed that are broken:

1. Right hand side details view is not spanning full width
2. Search list results overflows and doesn't have scrolling. Now it covers the whole page which is wrong.
3. Smaller screen size layout is broken

[limesTech]

Great!

I took at quick look at this and it works a bit better but still far from complete. Here are some points I noticed that are broken:

1. Right hand side details view is not spanning full width

2. Search list results overflows and doesn't have scrolling. Now it covers the whole page which is wrong.

3. Smaller screen size layout is broken

I just tested it again and you are right. Seems like I had the only edge case where it worked fine. Some grouped logs with many replies. Then it covers the whole screen and scrolling is working properly. The MD layout was broken before, therefor I would create a separate PR for it, but I can integrate it as well.

[maxfrederiksen-ess]

Make sure you have enough logs to go beyond viewport height. When you say MD layout you mean small screens? I noticed this as well that it wasn't working exactly as intended, however, it was still stacking, but yours overlays, that's the major difference. I have just added this fix to main since it was quite small so you can rebase and it should be fine.

Improving the responsiveness is not something we have prioritized since majority uses desktop, however it should work as before. If you're unsure how it's supposed to work just compare with latest main.

[limesTech]

Make sure you have enough logs to go beyond viewport height. When you say MD layout you mean small screens? I noticed this as well that it wasn't working exactly as intended, however, it was still stacking, but yours overlays, that's the major difference. I have just added this fix to main since it was quite small so you can rebase and it should be fine.

Improving the responsiveness is not something we have prioritized since majority uses desktop, however it should work as before. If you're unsure how it's supposed to work just compare with latest main.

Thanks, for the fix in the main. I will rebase and commit the fixes, might take until next week, since other projects came up with higher priority.

[limesTech]

Bugs are fixed. Now, small screens viewports seems to work decent enough to scroll through logs if ever needed.
Code Style not optimal, but maintainable. @maxfrederiksen-ess are you fine with this version?

[maxfrederiksen-ess]

Definitely better! However I do still have some comments:

1. There is a slight overflow on the entire screen, see screenshot.

2. I would like to still have a vertical divider like before but it's been removed. 3. Code is a bit messy and could most likely be simplified, however if you can tidy up the above 2 points I could refine the code if you want. However I will be gone on vacation most of November so will take a while.

[maxfrederiksen-ess]

Why did you remove arrow function and styled wrapping?

[limesTech]

I think it looks cleaner.

[maxfrederiksen-ess]

Gotcha. Well the consensus and standard is using arrow functions so we should revert to that. The styled and classname i see you moved directly into ContentView so thats fine

[limesTech]

Definitely better! However I do still have some comments:

1. There is a slight overflow on the entire screen, see screenshot.

2. I would like to still have a vertical divider like before but it's been removed. 3. Code is a bit messy and could most likely be simplified, however if you can tidy up the above 2 points I could refine the code if you want. However I will be gone on vacation most of November so will take a while.

1. True, I missed the overflow of Tags
2. If you need them, I'm fine with adding them back in.
3. Only thing I disliked was the long config in the Resizable component. Anything else? Things, like useState / useTheme ... are needed since if not it looks like the old version where resizing of the LogDetails did not match full width.

[maxfrederiksen-ess]

Yeah the config and manual resizing logic seems a bit too much. Im hoping there is a simpler solution but I know how finnicky this kind of feature is so I wouldn't mind taking a look and refining it ones the big things are in place 👍