Align sidebar gears to the right

[quentinguidee]

Currently, the issue/pr sidebar is hard to read visually. One of the reason is that the gear icons make reading difficult because they are "in the way" when reading, and not aligned together.

This PR proposes to align them on the right.

Actions are also better highlighted this way.

Screenshots

Issue

Before this PR	After this PR

Pull Request

Before this PR	After this PR

[wxiaoguang]

If it is a general/common layout, it needs a well-defined style, but not copying a lot of duplicate helper classes.

.ui.dropdown.text-flex-grow {
}
.ui.dropdown.text-flex-grow .text {
}

<div class="ui dropdown text-flex-grow">
</div>

[silverwind]

If it is a general/common layout, it needs a well-defined style, but not copying a lot of duplicate helper classes.

.ui.dropdown.text-flex-grow {
}
.ui.dropdown.text-flex-grow .text {
}

<div class="ui dropdown text-flex-grow">
</div>

Hmm, I think I would have preferred justify-content: space-between and two distinct <div> children over another "helper" class.

[wxiaoguang]

Hmm, I think I would have preferred justify-content: space-between and two distinct <div> children over another "helper" class.

Do you mean this 3c0ed69 ? A lot of tw-flex tw-flex-grow tw-justify-between ? Or some better solution?

[wxiaoguang]

GitHub doesn't use the unnecessary inline helpers either.

[silverwind]

I meant

<a class="text muted tw-flex tw-justify-between">
  <strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>

This will work as long as there exactly 2 child elements, which luckily is the case here.

Another option may be auto margin {{svg "octicon-gear" 16 "tw-ml-auto"}}, but it requires the parent to fill the space.

[silverwind]

GitHub doesn't use the unnecessary inline helpers either.

Ugh, float, no thanks.

[wxiaoguang]

I meant

<a class="text muted tw-flex tw-justify-between">
  <strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>

This will work as long as there exactly 2 child elements, which luckily is the case here.

Another option may be auto margin {{svg "octicon-gear" 16 "tw-ml-auto"}}, but it requires the parent to fill the space.

No, it doesn't work. You can try to check out the PR and try by yourself.

[quentinguidee]

I can confirm this was my first idea too, unfortunately without success

[silverwind]

Yeah it would need tw-w-100 on .ui.dropdown and tw-flex tw-justify-between tw-flex-1 on the a, but I guess that is arguably more effort than this approach.

[wxiaoguang]

Yeah it would need tw-w-100 on .ui.dropdown and tw-flex tw-justify-between tw-flex-1 on the a, but I guess that is arguably more effort than this approach.

Then it becomes more ugly, right? Dozens of tw-xxx helpers repeat again and again.

[silverwind]

Yeah this is more elegant.