[Sub Issue] Project Issues & MR's

New proposal

Proposed design:

• If screen size >= 1280px, we limit the width of container to 958px.
• If screen size < 1280px, the container still works the way responsive.
• Change the length of paragraphs on issue body and comments to 700px.

What we can solve

• The layout doesn't feel balanced from the visual perspective.
• Not good readability.

---

1280*800px

1440*1020px

1920*1200px

Meta issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/13680

---

Old Proposal

new max-width: 790px

Old

New Design:

cc: @tauriedavis @hazelyang @cperessini

if good, I'll assign front end label

mentioned in issue #13680 (moved)

design: https://gitlab.com/gitlab-org/gitlab-ce/issues/13680#note_14865026

comment on getting this to frontend: https://gitlab.com/gitlab-org/gitlab-ce/issues/13680#note_15241652

Assigned this milestone 8.12 as the meta issue has this milestone

cc: @jschatz1 @fatihacet @tauriedavis

Added frontend and removed ~19492 labels

Milestone changed to %8.12

Assignee removed

Milestone changed to %8.13

cc: @awhildy

Milestone changed to %8.14

Mentioned in issue #13680 (moved)

Reassigned to @mikegreiling

Assignee removed

Reassigned to @mikegreiling

Some questions on this:

1. Are we disregarding the user's layout width preferences if it is set to fluid or just changing the max-width when it is set to fixed?

2. Are we changing:

   .container-limited {
       max-width: 1280px
   }

   to:

   .container-limited {
       max-width: 958px
   }

   universally?

   Or do I need to create a new .container-xxx class just for the Issues and MR pages? What about the different Merge Request tabs (changes, pipelines, etc)? These require a lot of horizontal space.

3. Where did 958px come from? That seems awfully specific... Also the width in the example screenshots seem to be around 996px?

^ @tauriedavis @dimitrieh :)

@hazelyang I think these specs are from your latest mockups. Can you take a look at Mikes questions?

this should probably be specific to the issue discussion and mr discussion tab

Are we disregarding the user's layout width preferences if it is set to fluid or just changing the max-width when it is set to fixed?

We want the Issues and MR discussion can have a limited width of the content, so if it is set to fluid or changing the max-width, the width of content is still 958px.

---

Are we changing:

.container-limited {max-width: 1280px}

to:

.container-limited {max-width: 958px}

universally?

I think this should be specific to issue and MR pages as @dimitrieh mentioned.

---

Where did 958px come from? That seems awfully specific... Also the width in the example screenshots seem to be around 996px?

What about my other question:

What about the different Merge Request tabs (changes, pipelines, etc)? These require a lot of horizontal space.

Could I see a mockup of a MR page which has the "changes" tab open? Will the diff section also be limited to 958px as well?

@mikegreiling I believe we should cut scope for now.. as the mr view has unforseen challenges..or at least design challenges that have not been though out. like tabs and diff discussions etc

I think it would be okay to just implement this for issues for now. agreed @hazelyang @tauriedavis ?

Yeah, I think that would be okay. Also, I would be willing to pick this issue up and work on the frontend. I realize that everything may not be defined and it might be easier to play with it in the browser rather than making lots of comps. Feel free to reassign to me, @mikegreiling. If you want to keep working on it, that is okay too :)

Thanks @tauriedavis, I'll reassign it to you. I've got quite a bit on my plate, so if you think you could give this the attention it needs feel free to take it

Reassigned to @tauriedavis

Mentioned in issue #24408 (closed)

Mentioned in issue #21302 (moved)

Milestone changed to %8.15

Mentioned in merge request !7858 (merged)

closed via merge request !7858 (merged)

mentioned in issue #26073 (closed)

mentioned in issue #30920 (closed)