Fix RTL margins and alignment of elements in lists and on project page

I've taken a look a one of the project pages as well. i've picked the webform module that it has one of the more extensive body fields (see the two screenshots). a few potential problems i've noticed:

• The details section in the sidebars has quite a few alignment issues.
• The headlines like features, getting involved... etc are aligned left instead of right.
• The quote in the feature section is also aligned left instead of right.
• The whole getting the most out of the webform module section, headlines as well as paragraphs is aligned to the left instead of right
• Meet the project maintainers the images are correct as well its descriptions but the headlines are aligned to the left instead of to the right.

That is totally up to you. I am not a developer, therefore i am unable to judge which solution would result in the leanest code. Totally trust on your judgment on that end. But also definitely a +1 for creating child issues and trying get the leanest most robust solution. What ever works best.

And did a quick last check and took a look at the instructional modal in case package manager is not installed and or #3312289: Svelte UI for install controllers is not landed yet. the margin at the beginning and at the end of the code snippets is not correct. At the beginning it is too less and at the end after the icon it is too much. Also added the details to the issue summary.

I have tried to address most of the feedbacks regarding the RTL support.Please check and provide feedbacks for more improvements .

The inline css properties is a great solution! It seems like this could all be addressed in one issue, but if we hit something trickier it's certainly worth moving that to a followup so we can commit all the good improvements here.

On manual review I spotted the following:

1. Looks like the magnifying glass icon is being moved in a way we don't want with the changes here. This is for LTR and RTL If this isn't happening on your sites I'll dig further into what styles are causing the issue.
   
2. The filter dropdown doesn't have quite enough margin against the container in LTR.

   

3. On RTL the distance between a radio input and it's label looks doubled or more. It also seemes container of radio+input are close to each other.
   

I 've tried to test the merge request a few days ago for the first time but I was unable to apply. But with the latest changes today it possible to apply. thanks! I've then installed the multilingual modules and installed and set hebrew as the administration language (even though it hasn't had much of an effect since most of the strings aren't translated yet).

The three points in #11 still apply. In addition #11.1 does apply for ltr as well:

(*on the left a window with english as the administration language (ltr) and on the right with hebrew as the administration language (rtl))

on single project pages on the first look the points in #2 seem also still to apply. the body is left aligned instead of right aligned. same for the details section in the sidebar with its elements (especially the unordered lists looks off)

but on a second look it seems not in general for every single project page cuz i've taken a look at the webforms module i've used as an example in previous comments. there parts of the body (for example the unordered lists) are correctly aligned to the right (see webform.jpg)

Grid: "List" button is right aligned and should be moved to the left over to the grid button.

Still right aligned.

The spacing between the sort by select and filters button is smaller in LTR than RTL while the filters buttons is missing a spacing to the left border.

Spacing needs to be adjusted.

Filter component: The radio button labels in the expanded filters buttons are on the left instead of the right of the label. Also, spacing needs adjustment.

Design not correct in RTL.

The code snippets don't have enough margin or padding at the beginning and too much margin or padding at the end after the clipboard icon.

This is not fixed yet.

Addressed all the feedbacks in #16.

All the feedback is addressed and the changes look great. I could find only one issue with the list view. The security icon is not aligned with the other elements and spacing between the two icons in RTL is not as much as in LTR.

MR as of right now:

Tested the MR locally and I'm seeing some of the alignments different than the screenshots in #22.
1. The filters are going out of the box on the right.

2. The "Add and install" buttons are not aligned with the security icon and the "Installed" button.

Forgot to push the changes to the MR that result in the successful screenshots from #22. They are pushed now

Found 2 design issues in attached screenshot, circled in red.

Addressed feedbacks from #25.

Everything looks great except 2 points:

1. Grid and List button should be left aligned
2. Space between Sort by and filter is more

All points addressed. Marking as RTBC.

This seems to provide only improvements without regressions and if we missed anything we can take care of it in followups. This should get in before the pending CSS cleanups make it a nightmare to rebase. Merging.