feat(tile-manager): styling improvements

Author: SisIvanova

src/components/tile-manager/themes/shared/tile/tile.common.scss

@@ -23,6 +23,14 @@ $theme: $material;
     box-shadow: var-get($theme, 'drag-elevation');
 }
 
+[part~='resizing'] {
+    opacity: .3;
+
+    &:hover {
+        border: rem(1px) solid var-get($theme, 'border-color');
+    }
+}
+
 [part="content-container"] {
     background: var-get($theme, 'content-background');
     color: var-get($theme, 'content-color');

src/components/tile-manager/themes/tile-header.base.scss

@@ -21,5 +21,6 @@
 }
 
 [part='actions'] {
+    display: flex;
     gap: rem(8px);
 }

src/components/tile-manager/themes/tile.base.scss

@@ -3,13 +3,14 @@
 
 :host {
     display: block;
-    height: fit-content;
     position: relative;
 }
 
 [part~='base'] {
     resize: both;
     overflow: auto;
+    width: 100%;
+    height: 100%;
 }
 
 [part='content-container'] {

src/components/tile-manager/tile-header.ts

@@ -8,11 +8,11 @@ import { styles } from './themes/tile-header.base.css.js';
  * @element igc-card-header
  *
  * @slot title - Renders the tile title
- * @slot subtitle - Renders the tile subtitle
  * @slot actions - Renders the tile actions
- * @slot - Renders content next to the tile title
  *
  * @csspart header - The tile header container
+ * @csspart title - The tile title container
+ * @csspart actions - The tile actions container
  */
 export default class IgcTileHeaderComponent extends LitElement {
   public static readonly tagName = 'igc-tile-header';
@@ -27,25 +27,21 @@ export default class IgcTileHeaderComponent extends LitElement {
     return html`
       <div part="header">
         <slot part="title" name="title"></slot>
-        <span part="actions">
+        <section part="actions">
           <igc-icon-button
             variant="flat"
             collection="default"
             exportparts="icon"
             name="expand_content"
           ></igc-icon-button>
-        </span>
-        <span part="actions">
           <igc-icon-button
             variant="flat"
             collection="default"
             exportparts="icon"
             name="fullscreen"
           ></igc-icon-button>
-        </span>
-        <span part="actions">
           <slot name="actions"></slot>
-        </span>
+        </section>
       </div>
     `;
   }