Change 824570 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] UX improvements for the event details dialog on event page

https://gerrit.wikimedia.org/r/824570

@Daimona for this AC:

The modal should have a single column. The content should be arranged in the following order: Title, organizers, Date and time, location and participants.

Between 591px and 699px it uses the mobile modal view, but is in two columns instead of the one column that occurs on smaller breakpoints.

In T315544#8178842, @vaughnwalters wrote:

@Daimona for this AC:

The modal should have a single column. The content should be arranged in the following order: Title, organizers, Date and time, location and participants.

I made it so that the columns should always have equal width, and the width of a column should always be at least 20em. This effectively means that you still get the 2-column layout if your screen is wide enough; the actual breakpoint widths change depending on the content. I hope that is OK, but pinging @gonyeahialam to let him weigh in on that.

Change 824570 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] UX improvements for the event details dialog on event page

https://gerrit.wikimedia.org/r/824570

✅ The modal should have a single column (it currently does, except for between 591px-699px, see explanation below)
✅The content should be arranged in the following order: Title, organizers, Date and time, location and participants.
✅ In-person and Online events headings look like normal text. It should look like the header text as on desktop.
✅The meeting URL should have the link icon before it.

@gonyeahialam this differs from the AC slightly because between 591px and 699px it is two column. T315544#8178842. See below for @Daimona's explanation. I think it looks good but let me know if you have feedback.

In T315544#8179928, @Daimona wrote:

In T315544#8178842, @vaughnwalters wrote:

@Daimona for this AC:

The modal should have a single column. The content should be arranged in the following order: Title, organizers, Date and time, location and participants.

I made it so that the columns should always have equal width, and the width of a column should always be at least 20em. This effectively means that you still get the 2-column layout if your screen is wide enough; the actual breakpoint widths change depending on the content. I hope that is OK, but pinging @gonyeahialam to let him weigh in on that.

In T315544#8189749, @vaughnwalters wrote:

✅ The modal should have a single column (it currently does, except for between 591px-699px, see explanation below)
✅The content should be arranged in the following order: Title, organizers, Date and time, location and participants.
✅ In-person and Online events headings look like normal text. It should look like the header text as on desktop.
✅The meeting URL should have the link icon before it.

---

@gonyeahialam this differs from the AC slightly because between 591px and 699px it is two column. T315544#8178842. See below for @Daimona's explanation. I think it looks good but let me know if you have feedback.

In T315544#8179928, @Daimona wrote:

In T315544#8178842, @vaughnwalters wrote:

@Daimona for this AC:

The modal should have a single column. The content should be arranged in the following order: Title, organizers, Date and time, location and participants.

I made it so that the columns should always have equal width, and the width of a column should always be at least 20em. This effectively means that you still get the 2-column layout if your screen is wide enough; the actual breakpoint widths change depending on the content. I hope that is OK, but pinging @gonyeahialam to let him weigh in on that.

@vaughnwalters This is good.