fix(LeftSidebar): revert temp styles and fix conversation styling

[DorraJaouad]

☑️ Resolves

• Fix Conversation item border is cut of when tabbing #10443 again :') ( changes of its PR were reverted here ). Another workaround is now used which is basically moving the outline inside the element.
• Fix the unexpected outline on favorite conversations ( border radius is changing) . As I checked, there was no explicit style for the border radius coming from the favorite icon node. Setting overflow: hidden solved it though
• Revert some changes after merging fix(NcListItem): adjust paddings and hover styles for list items nextcloud-libraries/nextcloud-vue#4628

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before	🏡 After

🚧 Tasks

• Code review
• Visual review

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[ShGKme]

We should not do this to fix the border...

1. It updates only on conversation list update, but it doesn't work on height change, e.g. window resize. It can be fixed by window's resize event or resize observer, but it's not great for performance to do it just for a border.
2. It directly mutates DOM nodes that are rendered and managed by Vue with Virtual DOM. We should never mutate Vue's DOM. It has many ways to break.
3. It also searches for an element with a query selector, which is not a big issue but can be easily broken by a small layout change with a class rename.

[ShGKme]

Ferdinand just suggested an alternative solution for such issues in NcCheckboxRadioSwitch: using outline-offset -2px. Then the outline it inside the element, and there is no issue with overflow. Maybe try using it here? Or fix it on the nextcloud/vue side...

[ShGKme]

Or to try to add a 2px footer in the virtual scroller

[DorraJaouad]

The outline-offset is the optimal solution IMO but would rather change it in nextcloud/vue . If so, I will also add the overflow: hidden there too.

UPD: .. or not :p , let's keep it here as the outline might be off for other apps like Mail where there is a timestamp near the top-right edge.

[nickvergessen]

Replaced the milestone with 28 as the PR targets main.
If this is something for 27, we should backport it after merged to main

[ShGKme]

Works, but there is only a native web-browser's outline. Not sure if it is expected.

[nickvergessen]

Also the last item is cut off again?

[DorraJaouad]

Works, but there is only a native web-browser's outline. Not sure if it is expected.

Native outline seems to be on all elements not only list items.

Also the last item is cut off again?

That's the native outline being cut off (extra 1px I guess)