Fix: Show an ellipsis if Query row title is too long (#27648)

* add overflow hidden to titleWrapper

* show ellipsis and css labels for components

* readd drag handle after bad merge

* rewrite userpicker test with rtl

* update test after adding css label to icon component

* fix more tests..

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -19,6 +19,7 @@ export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
 const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     container: css`
+      label: Icon;
       display: inline-block;
     `,
     icon: css`

packages/grafana-ui/src/components/Layout/Layout.tsx

@@ -119,6 +119,7 @@ const getStyles = stylesFactory(
 
     return {
       layout: css`
+        label: HorizontalGroup;
         display: flex;
         flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'};
         flex-wrap: ${wrap ? 'wrap' : 'nowrap'};