citizenos/citizenos-fe

citizenos-fe's Issues

Language section shows Crowdin as an option

Specifications

MacOS Chrome

Problem

When the user clicks on languages, Crowdin is showed as an option (screenshot). Also there is a big space in the middle on the left (highlighted in screenshot)

Expected result

Crowdin should not be a language option and options should be aligned.

Adding files to arguments & follow-up

Original in fe-old

What is the user story?
As a user, I would like to add files to visualize my follow-up messages and arguments. Currently there is no opportunity to add graphics or pictures into the discussion part, but in some cases it is really relevant to visualize your argument with infographics or pictures.

Which feature needs to be updated and how?
Text description is not always that accurate as is infographic or picture. In Follow-up phase it would be great to add voting results and any further action (like how the community house building is going) in more visualized matter. In arguments, it´s sometimes needed to show same graphics, figures and numbers in table as a picture or infographic.

Additional information.
N/A

Suggest similar public topics when a new public topic is being created

Originally from fe-old

Problem
When a topic becomes hot in society, it is likely, that multiple people will want to create a public topic in Citizen OS about it. However, it makes more sense, if they all contribute to the same public topic, instead of creating double entries.

Why is this a problem?
It may not be, however, in an ideal world, people's efforts would be pooled to achieve a diverse discussion and the best possible decision.

Possible solution
When you start entering a topic title, compare the words to other topic titles and if the per centage of similarity exceeds a certain threshold, display possible existing topic(s) about the same problem.

Change "Edit topic" text to "Done editing"

In document editing mode the "Done editing" button is named as "Edit topic". Please change that.

Join Group remains Join Group until the page is refreshed or navigated away from

Specifications

MacOS Safari

Problem

When the user clicks on Join Group for a Public Group, they are asked to confirm that they would like to join the group (screenshot attached).

However, after confirming Yes, the Join Group button remains the same until the page is refreshed (screenshot attached).

Expected Result
The Join Group button should be replaced with View Group once the user has confirmed Yes. The change should not only be reflected once the user has refreshed the page or navigated away from it.

Alter argument loading

Original in fe-old

Current pagination solution only displays x amount of arguments, but to make arguments more visible we should add load more button and load arguments into same view.

Problems with search function

Original from Fe-old

Search is not working properly

Llist of items to fix (add to here):

• Display no results text if no results found
• Result list heading text formatting issues (no space)
• Order results by newer first
• Remove word "Context" from result list headings
• Make it so there is no difference between whether a user presses enter after search term or not
• Make sure search function is finding topics with all search words included, not necessarily next to each other

Today's date does not display correctly and does not work as a deadline

Specifications
MacOS Google Chrome

Problem
When the user clicks on Deadline -> Off under Voting Options and tries to select the date today, the output displayed is incorrect and an error message received that the deadline has p

assed, even though it is (see screenshot)

Expected Result
Date should be 03/14/2023 and the deadline should work. In case the deadline must be at least 24 hours later, then the error message should reflect this AND the user should be informed (maybe text under deadline informing them of this.

UX: Joining topic via link changes the permission for people who are being invited with higher rights then "participant"

Original from fe-old
What is the user story?
I created a topic and added it to the group where I gave all the participants "editor" rights. I also shared this topic in Slack and called people to join the topic via link. People who joined via the link had "participant" rights and they could not edit the topic content. Now I have to manually check if more people have joined via link and change their permissions. Most of our Users might not know that they have to change the rights when participants joins with the link.

Which feature needs to be updated and how?
When topic is added into a group with higher rights than "participant" then our system should change topic link rights as well, because from the user experience perspective, we cannot assume that Users know that the link rights are different then the rights that are given to all participants in the group (or invited via email).
When participant joins the topic via link, then our system should already recognizes the rights that have been given to him/her by the admin User when adding topic into the group or inviting people via email?

Additional information.
N/A

Attachment textfield not displaying properly

Specifications

MacOS Chrome

Problem

When the user tries to edit the attachment name, the field does not display at a reasonable width (screenshot attached)

Expected result
Attachment text field should be wider

Attachment One Drive option doesn't do anything

Specifications

MacOS Chrome

Problem

When the user clicks on add attachment and clicks on the One Drive option, nothing happens. All other options display a pop up window (screenshot attached)

Expected result
One Drive window should open

Duplicate users in Manage Participants

Specifications

MacOS Chrome

Problem

When user x invites user y twice, the system shows duplicate invites under manage participants>invited (as if it is two separate users). Screenshot attached.

Expected result
Same user/email should display only once under manage participants>invited

Custom partner FE page

Original in fe-old

Description
This issue is created to get input and create framework for providing custom sites for partners. We would like to have a solution where partners could configure their own FE page. The page would have their own logo and and color-schema. It could possibly even feature repositioning of menus etc. These pages would be hosted as new deploys in heroku. Each partner will get their own subdomain.citizenos.com site running. It would display their own topics and groups and by default they would not come up on our own app.citizenos.com page. But we could have a solution where they can make some topics public in there too, to get more input and coverage.

User story
A partners user creates an account on our partner configuring site. This would be completely separate page from our app projects. They register account, choose their payment plan. And after that they will have an user interface where they can input domain name that will be used to create subdomain. There will be an image upload box(es) where they can upload logo images and this would probably need to have some editing functionalities to make images fit. They will have some input boxes where they can choose main colors for the page, authentication/signing methods etc. We will have the list in the second section and these options can always extend. After inserting their configuration they can save the config and deploy their instance using "save" or "deploy" buttons. These actions would trigger a background flow where we create a new app in heroku that will clone our FE project and use the client input data to launch this subdomain app.

List of items that user can configure or use for their page
Logos
Main colors
Login/signing methods
Page layout (menu positions etc.)
Possibly Import/Export data (GDPR) @KatiVellak
Payments/billing
Emails would need to have partner visuals too
API enhancements list
List of items that would need to be done to make our API more compatible with partner sites.

Public topic filtering
User data filtering (only display partner users for partner API calls etc.)
Public group filtering
Public topic querying to allow partners publish public topics on our app.citizenos.com page
Users could possibly need to have some kind of partner management option, this means that they would have to have settings that allow to choose to be seen only on partner site, if they prefer to not use our main app. This issue could all be solved by our terms and conditions, but still partners would probably want to get some statistics about users and topic count etc.

FEATURE: add deadline for topic discussion (in progress) phase

Original in fe-old

What is the problem?
If a user wants to have a discussion for a week and then move on to voting, then they have to open a topic to start the discussion, then make a separate calendar entry to their off-site calendar to move the topic into voting on a specific date. On that date navigate back into Citizen OS to change topic status.

Why is this a problem?
It makes the process longer and more complicated for the user than it has to be. Also, the author / admin can be busy in a meeting somewhere, with users anxiously waiting to start voting on the agreed date. This creates frustration, bottlenecks.

Possible solution
Make a similar deadline for discussion phase as there already is for the voting stage. On that deadline the topic automatically changes status without the author / admin having to do anything.

Voting deadline not displaying correctly after send to voting has been completed

Specifications

MacOS Safari and Google Chrome

Problem
The voting deadline date does not appear to be in the correct format (screenshot).

Expected result
Correct format from live environment is attached below (screenshot)

UX issues: Manage Participants / Invite users

Original in fe-old
As discussed recently with @anettlinno, I noticed a UX problem with the Manage Participants feature, which is that you can't invite participants from within the "Manage Participants" window, which would (I believe, and fairly certainly) be what most users would expect. (Myself, even once I'd noticed that it wasn't possible, I kept going back to "Manage Participants" to invite people as it seems the most intuitive).

So my suggestion is that the "Invite users" function be incorporated within "Manage participants". (No need for a separate menu link either). And (as one user suggested in our HC user tests) the share topic function could potentially also be included within the same window - so everything related to managing participants is all in one place. Though this latter one I'm less sure about from an intuitive UX perspective.

There's also some differences in wording here - we "invite users" but "manage participants" - should be the same for both I think?

Test app does not load on MacOS Safari

Specifications

MacOS Chrome

Problem

test.app.citizenos.com does not load on MacOS Safari (screenshot attached). Safari developer tools show this error (screenshot attached)

Expected result
Page should load (works alright on Chrome)

Send to voting does not work

Specifications

MacOS Chrome

Problem

When the user goes to create a topic and then clicks send to vote nothing happens (screenshot attached)

Expected result

Topic should go into voting and user should be able to select type of vote (as per UX in live environment)

Add labels to topics, get rid of categories

Original in fe-old

What is the problem?
Categories are stiff, hard-coded and adding new ones takes time. Not an ideal option for categorising and filtering topics. Right now, they're only useful for public topics.

Why is this a problem?
As the number of topics increases, an efficient way for sorting and filtering, including for private topics, becomes necessary. Categories is a suboptimal solution.

Possible solution
Add tags/labels to topics. Make them useful regardless of public/private status. Make them freely user-creatable. Add searching / sorting / filtering options based on tags / labels.

Suggested fixes for FAQ 6 re seeing bounced invites

Original from fe-old
These are my suggestions for tweaks to reduce the number of people having trouble with FAQ 6: "Can I see if any of the email addresses I invited to a group or topic bounced?"

(1) "Pending invites" help button

I suggest adding a little "Pending invites" help button, as per the mockup below.

The suggested text for this help button would be:

"The members listed below as “Pending” are those who have been sent email invites but not yet accepted.

However, if the email address ‘bounced’ (i.e. it was not a correct email address, and the invite was therefore not able to be delivered) it will still be listed here as “Pending”.

Need more guidance? See Q6 in our FAQs (hyperlinked 'FAQs')."

(2) Adding a "Guidance" help button when the user is entering emails

I suggest adding a little "Guidance" help button, as per the mockup below.

The suggested text for this help button for Groups invites would be:

"We recommend posting at least one topic in the group before inviting users, as being invited to an empty group can cause confusion.

Multiple email addresses can be invited in one go, simply by separating them each with a space or comma.

Please note, if you enter an email address which does not actually exist (e.g. you type it wrong) the system will still consider it sent, and mark it as "Pending" in the group's user list.

So before inviting users, make sure that the email addresses you have entered are correct and in use.

Please also check that you have entered all email addresses in the correct format (i.e. “hello@email” rather than “[email protected]”). Otherwise, the system will not accept it, and the invite will not be sent.

Need more guidance? See Q6 and Q8 in our FAQs (hyperlinked 'FAQs')."

The suggested text for this help button for Topics invites would be:

"Multiple email addresses can be invited in one go, simply by separating them each with a space or comma.

Please note, if you enter an email address which does not actually exist (e.g. you type it wrong) the system will still consider it sent, and mark it as "Pending" in the topic's user list.

So before inviting users, make sure that the email addresses you have entered are correct and in use.

Please also check that you have entered all email addresses in the correct format (i.e. “hello@email” rather than “[email protected]”). Otherwise, the system will not accept it, and the invite will not be sent.

Need more guidance? See Q6 and Q8 in our FAQs (hyperlinked 'FAQs')."

(3) Allowing inviters to see the email addresses they invited to in the user list:

I suggest it should be possible for the person who sent the invites to see the full email address that was submitted, not just the username of the email. Then they can check retrospectively that they have sent the invites to the correct email address, if they have some that are pending.

However, I also see there is a similar request here that would also solve this problem, and there may be a "tidier" way to do it: #670

(4) A way for the system to recognise which emails have bounced?

I assume it isn't possible for the system to recognise which emails have bounced, but if there is then we could consider how to make this apparent to the person who invited them.

No space between users access level and member

What is the problem?
When the user clicks on Public Groups->Invite Members the popup window under link sharing has no space between the text and the member role (screenshot for reference).

• add screenshot / screencast whenever possible

Why is this a problem?
It confuses the user as to whether the role is really a role or if it is just normal text.

Possible solution.
Add a space between users access level and member.

24 hr clock is acutally 12 hr clock

When setting a time, User can choose 24 hr clock, but it actually is 12 hr clock:

KOU button form fields out of alignment and a href in plaintext

Specifications

MacOS Chrome

Problem
The KOU button has several form fields that are out of alignment and in plain text (screenshot attached)

Expected result

1. Fields should be properly aligned
2. should not be displayed in plain text but in HTML

UX improvements for moderation feature

Original from fe-old
When testing the moderation feature in order to write up the HC texts, I came across a number of UX issues, some much more serious than others, so I'll split them out as such..

More serious issues:

(1) When a user has already deleted an argument, the moderation pop up still appears as if the argument is still there. As both the original author and the moderator receive notifications at the same time, it is quite feasible that by the time the moderator comes to moderate the argument, the original author has already logged in and deleted it. I discovered that if they have, the window that appears when the moderator clicks "Moderate this argument" in their notification email looks as if the argument is still there.

See the screenshot below, this is what appeared when I clicked on the window as moderator, after having deleted the argument (from my other account). The error message saying that the content has been deleted only appears after they have taken action to moderate it.

I can imagine this could cause a great deal of frustration to users, as moderating offensive arguments can be quite stressful especially if it's a delicate subject with a fine line between freedom of speech and causing offense. I.e. the moderators thinks long and hard what is the right thing to do, calls a colleague to get a second opinion, calls the person who reported it too, then writes a carefully worded explanation of why they are deleting it, only to find that the argument had already been hidden anyway! :-/

(2) Same as above, but when the original author has already edited the comment. In this case, the moderation window that appears shows the edited version of the argument, but doesn't indicate that the comment has been edited. So they are going to think that someone has reported the argument in its edited form, when in fact they reported it in its original form. Again they are only notified that the argument has been edited after having tried to moderate it. Which could cause a lot of confusion, frustration, misunderstandings etc.

(3) There doesn't seem to be any way for the moderator to (transparently) explain their reasons if they decide to not take action on a report. For example, someone reports an argument as racist. The moderator disagrees as they don't think it is racist, and therefore clicks "No" or closes the window. Currently (as far as I can tell) in this case there is no visible trace that the argument was ever reported, why it was reported, that the moderator chose not to moderate it, or why they did not. (Which seems very non-transparent to me, the moderator should have to justify their choice either way and this should be visible somewhere, in my opinion).

Medium serious issues:

(1) The wording here doesn't really make sense in the context. As you're not changing your mind, just deciding not to moderate it. And it's also not clear what action they are taking, as "moderate" isn't very specific. So I'd suggest, "No, don't hide this", "Yes, do hide this". With the text above saying "Are you sure you want to hide this argument? You cannot undo this action."

(2) There is no "Other (please specify)" option, but there should be I think?

Less serious issues:

(1) There's some quite dodgy looking formatting here:

(2) Seems odd that you can report your own argument:

(3) This should say "Hide argument" or similar once it is open. (Standard practice - "View" then "hide")

(4) Wondering if "the community" is the right word here:

@ilmartyrk @anettlinno @ssin1901

Random delete button for Invite & Share Public Group

Specifications

MacOS Safari

Problem

When the user clicks on Invite & Share from a Public group topic and presses enter, there is a random delete button (screenshot attached).

Expected result
Only one delete button located to the right of emails.

Leave public group display button not working properly

Specifications

MacOS Safari

Problem

When the user joins a Public Group, the Leave Group button is displayed without the same style as Invite & Share (screenshot attached)

Expected result
Leave group should be the same style as Invite & Share

Argument section visible but not functional in a topic when Social mention is clicked

Specifications

MacOS Chrome

Problem
When the user goes to a topic and clicks on social mentions, the argument section remains in current position but since the social mention section is positioned on top of it, the argument section is not functional (screenshot attached)

Expected result

1. Argument section should be hidden when social mentions is clicked (as per current live environment UX)

Update my account view to include user connection info

Original in fe-old

We have added possibility for new users to connect their account with personal ID after initial log-in. If the user has registered account using e-mail. I believe we need this option under my account too. Possibly also including google and facebook connections there too. I would allow users to delete their Google/Facebook connections, but not allow deleting personal ID connection. This issue is also related to as there is possibility to add user connection, but no place for user to see them #940

BUG: Deleting group/topic from my/topics or my/groups list not reloading and redirecting

When deleting a topic from my topics view the list on the left hand is not reloading. also page redirect without opening another topic as expected by default. Same behavior is happening under my groups view

Product updates on the platform

Original in fe-old

What is the user story?
As a user I would like to know what are the latest updates and improvements in Citizen OS platform, so I could get the most out of the platform. Users who have not used the platform for a long time might want to know what has been changed to keep themselves updated.

What is the requested feature?
Latest updates should be on our platform somewhere where users could easily find it but that wouldn't be annoying for them. User who would like to get the latest updates should have an opportunity to make this decision by clicking on the "Latest updates" button.
It would also be nice to know about upcoming updates (without time frame) so that users would know that the platform is being constantly developed and also, what to expect.
@kevincrepin this is probably part of UX/UI redesign project, right?

Additional information.
As discussed with @liinaguiter and @BeccaMelhuish then latest updates will be also posted on our website and every once in a while we will do the (demo) videos about latest updates.

Investigate eIDEasy suitability

Original in fe-old

There is a service - https://eideasy.com/ - that might be useful for us. Need to look into it a bit.

Voting deadline text duplicated

Specifications

MacOS Chrome

Problem

When the user sets a topic deadline, the set a time text is duplicated (screenshot attached)

Expected result
Test should only appear once.

Public groups: Same user invited twice but with different invite status

Specifications
MacOS Google Chrome

Problem
When a user invites a participant who is already a member of the topic, they see the user under Manage Participants (see screenshot) but also under invited (see screenshot)

Expected Result
Message "This participant is already a member of this topic".

Topic settings unsaved, when clicking away from the dialog.

Original in fe-old

What is the problem?
When changing topic settings, changes are not save when clicking away from settings dialog window and no warning is provided. Settings only saved, when "Save" button is clicked.

Why is this a problem?
A user may think they made a topic private, for example, while the topic actually remains public.

Possible solution.
Provide some form of notification to the user, that there are unsaved changes.

Attachments not working

Specifications
MacOS Google Chrome

Problem
When the user uploads an attachment (see screenshot) the attachment is not reflected (see screenshot).

Expected result
Attachment should be uploaded and 0/10 should be replaced by 1/10

Spacing issue in show topics about every category

Specifications

MacOS Chrome

Problem

Spacing error (screenshot attached)

Expected result
Consistent spacing

Group and topic rights could be better distinguished and explained

Original in fe-old

What is the user story?
User story 1: Group admin gave all group members "reading" rights and "admin" rights to the topic. User (group admin) did not understand which right is at a higher level - group or topic. In this case user thought that group rights are higher than the topic rights, and as a result, one of the group members deleted one topic.
User story 2: Group admin expects that when giving someone group "admin" rights, they automatically have topic "admin" rights. User didn´t find the solution, as he could not find the place where he could change the topic rights.

Which feature needs to be updated and how?
Group rights by default could be "reading" rights and we should not give the group admin the ability to set group rights during the group creation process. The possibility to change group rights could be available under group´s general information (admin page) where admin would be able to change the group rights either one by one or for all users at once.

Additional information.
How can we explain to the user that topic rights are above group rights? I don´t have the answer :)

Own reaction in Activity feed

What is the problem?
User´s own reaction is shown in the Activity feed.

Why is this a problem?
I think we agreed in Notifications system that we do not show own reactions :) IMHO it´s not necessary and it creates more buzz in Activity feed...

Possible solution.
I would suggest to remove own reactions from Activity feed.

All votes in setting leading to an erroneous "the voting has ended" message

Specifications
MacOS Google Chrome and MacOS Safari

Problem
Step 1) User sends topic to voting
Step 2) User selects Regular Vote

Step 3) User selects All Votes Are In


Step 4) User invites User 2
Step 5) User 2 votes

Step 6) User 1 votes
Step 7) Error message for User 1 "The voting deadline has passed".

Expected Result
User 1 should see 2/2 votes counted before receiving "the voting has ended" message.

Members Invited Via Public Group > Invite & Share not Displayed in Members Although Email is Received

Specifications
MacOS Google Chrome

Problem
When a user invites a participant (see screenshot) the participant receives the email invite.

However, the Member is not shown as a pending participant (see screenshot).

Expected Result
Invited user should be shown as a pending participant under Members. Otherwise the user will continuously receive email invitations as there is no record of them having ever been invited.

WCAG (AA) - website accessibility

Originally from fe-old

This is needed for our UI/UX updates and accessibility. As in the initial description, we could possibly use some starting info from RAA issue and also do some research on latest standards. This task should probably be research and then listing the things that need to be implemented for WCAG.

Invite and share character limit warning missing

Specifications

MacOS Safari

Problem

When the user clicks on Invite & Share and enters text for "Add an optional topic invitation", they are limited to around 1000 characters but the user receives no directive nor warning indicating that there is a character limit (screenshot attached).

Expected result
User should receive a directive that they can only add up to 500/1000 characters. Ideally the number of characters should also be counted and the text colour should become red when the character limit is exceeded.

Why does the user not receive the email + password option?

Specifications

1. MacOS Chrome

Problem

1. User has previously signed up with email and password combination but when the user clicks on Join Topic after receiving a topic invitation to their email and is prompted to login, they get only these two options (screenshot attached)

Expected result

1. User should always be able to login with user and password combination
2. Instead of "bad request" user should receive detailed information about how to correct the course of action (for example "please select an option to proceed").

Character limit for public group description says 500 words but this is not the case

Specifications

MacOS Chrome

Problem

When the user selects the main language as English and clicks on create group and goes to add description, they are informed there is a 500 character count limit (screenshot attached).

However, the user can actually add as much text as they want (screenshot attached)

Expected result
User should not be able to add more than 500 characters and should receive a warning that they are going over the character limit. The character limit box should also have a red outline if they try to click create group without fixing the character limit issue.

Possibility to vote for several agenda points under one topic

Original from fe-old

What is the user story?
User wants to vote for several agenda points under one topic. This is a asked when the "master topic" contains two or more discussion points where the group should make a decision. Currently some users have solved this situation with using inline voting option, but here is the feedback:

inline voting is complicated to implement with large group of people as people who are not that advanced users, do not find inline voting feature and those who find it, have accidentally deleted either mini-voting, some parts of the body text or done other strange things;
inline voting results are not being seen when topic is not in editing view;
inline voting results are not downloadable or presentable in any (official) way and that is why it is not applicable in this use case.
Which feature needs to be updated and how?
It is probably bigger enhancement and requires investigation, but one of the solutions is to allow to choose more than one voting under each topic. User should have an opportunity to create each voting separately and they would be shown under each other.
Questions to think about are:

How to separate different voting from each other so that the user who is invited to voting wouldn´t get confused;
Should there be separate body text or explanatory text above each voting option and if yes, how to merge this with the body text so that it wouldn´t go too long?
Should user still have both voting types available (regular and custom voting) or only one of them?
How to provide voting results for the users so that it would be clear and understandable.
Additional information.
If to improve the inline voting feature so that the voting would be seen and voteable also in non-editing mode and voting results would be presentable, it could solve this user need.

Changes to Help Bubble for more useful data

Original in fe-old

As discussed (@tiblu @ilmartyrk, 06.07), it was agreed that changing the Help Bubble to make sure it gives us more valuable data (to understand where the users main pain points are, how they are feeling when using the platform, etc,) would be a good idea, by including the following things:

What are you trying to do? (With space for reply)
What difficulties are you facing? (With space for reply)
How are you feeling? With emojis from happy to frustrated.
It should be possible to send comments anonymously. So instead of a mandatory email: "Want a response? Leave your email"
We discussed that this would guide the user to give us much more useful info, but that they could be stuck if they just wanted to give feedback, ask a general question, rather than having a user issue. My hunch is that they would just use one of the comment boxes anyway, but @kevincrepin (and anyone else) your thoughts on this and the idea in general would be very helpful.

Ask for more information from users

Original in fe-old

What is the user story?
Activist authors need to get some contacts from users of their topics, especially for social-ID signing.

What is the requested feature?
Ask for people to provide their contacts, where they would prefer to be contacted about the topic they have just signed. This input- and consent form would be displayed every time someone has voted, unless they have given us their contacts and consent already.

Alternatively, there might be a larger form under profile, that we invite people to fill in, but do not mandate.

Additional information.
This information could then be made available to the authors upon downloading the signed container or be kept with us, but authors could send e-mail to them via our system.

Unable to search accounts despite show my profile in search results > On

Specifications
MacOS Safari and Google Chrome

Problem
Even when the user has set their settings to show profile in search results>On (screenshot 1, screenshot 2), the users name does not display in the search results (screenshot 3)

Expected result
Users name should be displayed

Unable to send topic to vote after assigning a deadline and all votes in

Specifications

MacOS Chrome

Problem

When the user clicks on set a time and adds input such as the time and which clock (UTC + 3), selects a deadline and all votes in, the user receives an error message (screenshot attached)

Expected result
If the user sets both options, then whichever one comes first should prevail (as per UX in the live environment)

Selecting Deutsch Language option expands the Log in button in an ugly way

Specifications

MacOS Chrome

Problem

When the user select Deutsch from the language options the log in/registration button gets expanded in a way that is not visually pleasing (no margin on the right side).

Expected result
Margins should be equal on the left and right