Icons overlapping idea title.

Bug Description

When the browser is resized to 960px, upon hovering an idea, the icons are displayed on top of the idea name.

Steps to reproduce

1. Go to Site Kit dashboard
2. Scroll down to Idea Hub widget
3. Resize browser to 960px
4. Hover a suggested idea.
5. See error

Screenshots

Additional Context

• Browser: Chrome

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• For viewports where the Idea Hub widget appears in a narrow state (even if this viewport is technically not “mobile”), the buttons on each idea should appear below the idea rather than on the right of the idea, similar to how it is in the current mobile layout.

Implementation Brief

Using assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Idea.js and assets/sass/components/idea-hub/_googlesitekit-idea-hub-dashboard-ideas-widget.scss:

• Replace the grid layout with normal divs:
  • Replace the <Grid> and <Cell> with <div>s with the same className attributes (.googlesitekit-idea-hub__idea--actions and .googlesitekit-idea-hub__idea--details respectively).
  • The <Row> can be replaced with a div with a suitable className (div.googlesitekit-idea-hub__idea--wrapper for example).
  • Remove any mdc-layout-grid-* CSS that is now redundant.
• Refactor the layout CSS:
  • For viewports below $bp-xlarge (1280), use a display: block-based layout, such that the .googlesitekit-idea-hub__idea--actions wraps underneath the .googlesitekit-idea-hub__idea--details.
  • For viewports above $bp-xlarge, switch to a flex-based layout, such that the two divs are inline
  • The media query which adds a display: none rule to the .googlesitekit-idea-hub__actions--delete, .googlesitekit-idea-hub__actions--pin and .googlesitekit-idea-hub__actions--unpin should be updated so that it applies to viewports above $bp-xlarge. This means that the action buttons are all visible when they wrap.
  • Similarly, the media query that applies justify-content: flex-end; to .googlesitekit-idea-hub__actions should be updated to apply to viewports above $bp-xlarge, so that the action buttons are left-aligned when they wrap.

Here is a gist:

	// Replace grid layout with normal divs
	return (
		<div className="googlesitekit-idea-hub__idea--single">
			<div className="example-css">
				<div className="googlesitekit-idea-hub__idea--details"> ... </div>
				<div className="googlesitekit-idea-hub__idea--actions"> ... </p>
			</div>
		</div>

@media (min-width: $bp-xlarge) {
	/* Use a flex layout above 1200 */
	.example-css {
		display: flex;
		padding: 12px 24px; /* use variables, this is just to illustrate */
		justify-content: space-between;
	}

	/* The following action buttons are hidden above 1200 */
	.googlesitekit-idea-hub__actions--delete,
	.googlesitekit-idea-hub__actions--pin,
	.googlesitekit-idea-hub__actions--unpin {
			display: none;
	}

	/* The  actions are right-aligned */
	.googlesitekit-idea-hub__idea--actions {
		justify-content: flex-end;
	}
}

And an example screenshot:

Below 1200	Above 1200

Test Coverage

• No new tests required.

Visual Regression Changes

• Images dealing with the Idea Hub Dashboard widget might need to be updated.

QA Brief

• Check that the icons in the Idea Hub dashboard widget does not overlap the text content across all breakpoints.

Changelog entry

• Ensure the icon buttons in the Idea Hub widget do not overlap idea labels.

[aaemnnosttv]

@eclarke1 I don’t think we can implement the suggested changes without more definition. Ideally we should establish some secondary ACs and design to work from in which case it might make more sense to address in a follow up issue. Cc: @felixarntz

[johnPhillips]

I’ve created a little demo of @alex-moulin’s idea hidden menu idea here.

https://google.github.io/site-kit-wp/storybook/pull/3966/?path=/story/modules-idea-hub-widgets-dashboardideaswidget--ready

Smaller screen	Larger screen

Notes:

• Context: the original conversation was on this PR: https://github.com/google/site-kit-wp/pull/3920
• This is just to aid discussion and deals with the piece about hiding the menu. I think there is further discussion to be had around what happens when a create / pin / unpin etc operation takes place (see https://app.asana.com/0/1185360131189553/1200879239497113/f)
• I’ve disabled the actions for the sake of time, so clicking the buttons won’t have any effect.