Allow to use maxWidth with Panel (#2411)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/panel/src/components/Panel.svelte

@@ -36,6 +36,7 @@
   export let isCustomAttr: boolean = true
   export let floatAside = false
   export let allowClose = true
+  export let useMaxWidth = false
 </script>
 
 <Panel
@@ -47,6 +48,7 @@
   on:close
   {allowClose}
   {floatAside}
+  {useMaxWidth}
 >
   <svelte:fragment slot="navigator">
     {#if $$slots.navigator}
@@ -127,19 +129,19 @@
         <slot />
       </div>
     {:else}
-      <div class="popupPanel-body__main-content py-8 clear-mins">
+      <div class="popupPanel-body__main-content py-8 clear-mins" class:max={useMaxWidth}>
         <slot />
       </div>
     {/if}
   {:else if $deviceInfo.isMobile}
-    <div class="popupPanel-body__mobile-content clear-mins">
+    <div class="popupPanel-body__mobile-content clear-mins" class:max={useMaxWidth}>
       <Component is={activity.component.Activity} props={{ object, integrate: true }}>
         <slot />
       </Component>
     </div>
   {:else}
     <Scroller>
-      <div class="popupPanel-body__main-content py-8 clear-mins">
+      <div class="popupPanel-body__main-content py-8 clear-mins" class:max={useMaxWidth}>
         <Component is={activity.component.Activity} props={{ object, integrate: true }}>
           <slot />
         </Component>

packages/text-editor/src/components/CollaboratorEditor.svelte

@@ -576,6 +576,11 @@
             editor.chain().focus()
           }}
         />
+        <slot name="tools" />
+      </div>
+    {:else}
+      <div class="formatPanel buttons-group xsmall-gap mb-4">
+        <slot name="tools" />
       </div>
     {/if}
   </div>

packages/text-editor/src/components/ReferenceInput.svelte

@@ -296,6 +296,7 @@
   </div>
   <div class="buttons-group large-gap ml-4 mt-2">
     {#each actions as a}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="icon-button" on:click={(evt) => handleAction(a, evt)}>
         <Icon icon={a.icon} size={'medium'} />
       </div>

packages/text-editor/src/components/StyledTextArea.svelte

@@ -39,6 +39,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="antiComponent styled-box clear-mins"
   on:click={() => {

packages/theme/styles/panel.scss

@@ -144,6 +144,10 @@
         margin-right: auto;
         width: calc(100% - 7.5rem);
         max-width: 860px;
+
+        &.max {
+          max-width: 100%;
+        }
       }
     }
 
@@ -156,6 +160,10 @@
         padding: .75rem 1.25rem;
         width: calc(100% - 5rem);
         max-width: 900px;
+
+        &.max {
+          max-width: 100%;
+        }
       }
       &.mobile {
         flex-shrink: 0;

packages/ui/src/components/Panel.svelte

@@ -31,6 +31,7 @@
   export let withoutTitle: boolean = false
   export let floatAside = false
   export let allowClose = true
+  export let useMaxWidth = false
 
   const dispatch = createEventDispatcher()
 
@@ -118,7 +119,7 @@
           }}
         >
           {#if $$slots.header && isHeader}
-            <div class="popupPanel-body__header mobile bottom-divider">
+            <div class="popupPanel-body__header mobile bottom-divider" class:max={useMaxWidth}>
               <slot name="header" />
             </div>
           {/if}
@@ -133,7 +134,7 @@
         }}
       >
         {#if $$slots.header && isHeader}
-          <div class="popupPanel-body__header main bottom-divider">
+          <div class="popupPanel-body__header main bottom-divider" class:max={useMaxWidth}>
             <slot name="header" />
           </div>
         {/if}