Message Boards has Multiple UI/UX issues.

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.2.X, Master
• Fix Version/s: 7.2.X, 7.3.10 DXP FP1, 7.3.10.1 DXP SP1, 7.3.6 CE GA7, 7.3.X, 7.4.13 DXP GA1, Master
• Component/s: Tag Libraries > Liferay Frontend Taglibs
• Labels:
  • 7.3-pre-fp1
  • ee-ts
  • liferay-dxp-73-sp1
  • liferay-fixpack-dxp-1-7310
  • liferay-fixpack-dxp-9-7210
• Branch Version/s:
  7.3.x, 7.2.x
• Backported to Branch:
  Committed
• Fix Priority: 2
• Git Pull Request: https://github.com/liferay-lima/liferay-portal/pull/938

Case 1:

Description:
If a message board title is long enough, the flag and up/downvote icons partially cover the title. This occurs at screen widths slightly greater than 767-770 ** and also at 540~.

Steps to Reproduce:

1) Add a Message Board Portlet to the home page.

2) Create a new category: Political

3) Add a new thread "The Declaration of Independence of the United States of America" in all upper-case.

4) Switch to simulation mode in the top right-hand corner.

5) Set it to 767-770 width and 540~.

Expected Behavior:
The flags and icons do not obstruct any portion of the title.

Actual Behavior:
The flags and icons obstruct a portion of the title.

Case 2:

Description:

On xs and sm devices (<768px), the message board search feature layout is broken. It appears outside the message board and with an "X" button above it.

Steps to Reproduce:

1) Add a Message Board Portlet to the home page.

2) Create a new category: Political

3) Add a new thread "The Declaration of the United States of America"

4) Switch to simulation mode in the top right-hand corner.

5) Set it to 767 width.

Observe that the message board search function is broken.

When setting the width to 768 the behavior is fixed.

Expected Behavior:

Search Function doesn't break.

Actual Behavior:

Search Function is broken.

 

Reproduced Branch:
f13f665f66470f971b3679a159f717ff9af933ad

Reproduced Master:
454d7f6a439dc668a0ce0529cff2cae87ee9a0d5