Fix issue with changing between responsive views and Gin Toolbar over menus

Attached a static patch file

? UX/UI designer responsibilities
I only have access to the Drupal Admin UI - Claro design system
But, No access for the Gin Admin theme design system.
Only thinking of what we can see out of the box in the Gin Admin theme

Would you like to have the look of active responsive view same as the hover ?
Would you like to have the icon as is ? ( which looks like the default icon from responsive view )
background-color: var(--gin-icon-color); - with the mask for the icon
→

Or have the icon with background-color: var(--gin-color-button-text); - with the mask too
→

Switched to have the icon with background-color as --gin-color-button-text with the image mask to match with active responsive views colors.

→

Switched to have the icon with background-color as --gin-color-button-text with the image mask to match with active responsive views colors.

→

The Gin top toolbar and left toolbar keep some spacing in the responsive preview frame

The following classes are needed

.responsive-preview-frame body.user-logged-in.toolbar-tray-open.toolbar-vertical {
  padding-top: 0px !important;
}

[dir="ltr"] .responsive-preview-frame.gin--vertical-toolbar.toolbar-fixed {
  padding-left: 0 !important;
}

[dir="rtl"] .responsive-preview-frame.gin--vertical-toolbar.toolbar-fixed {
  padding-right: 0 !important;
}