Full width horizontal scroll

assets/js/src/core/components/content-toolbar-sidebar-layout/content-toolbar-sidebar-layout.styles.tsx

@@ -39,9 +39,15 @@ export const useStyles = createStyles(({ token, css }) => {
         border-top: 1px solid ${token.colorBorderTertiary};
         grid-column: 1 / 2;
         grid-row: 2 / 3;
-        position: sticky;
+        position: relative;
+        overflow-x: auto;
+        overflow-y: clip;
         bottom: 0;
         height: ${token.sizeXXL}px; 
+        
+         &::-webkit-scrollbar {
+            display: none;
+        }
       }
 
       .content-toolbar-sidebar-layout__sidebar {

assets/js/src/core/components/content-toolbar-sidebar-layout/content-toolbar-sidebar-layout.tsx

@@ -14,6 +14,7 @@
 import React, { memo, type ReactNode } from 'react'
 import { useStyles } from './content-toolbar-sidebar-layout.styles'
 import { Content } from '../content/content'
+import { HorizontalScroll } from '@Pimcore/components/horizontal-scroll/horizontal-scroll'
 
 interface ContentToolbarViewProps {
   children: ReactNode
@@ -36,15 +37,17 @@ const Component = (props: ContentToolbarViewProps): React.JSX.Element => {
       </Content>
 
       { props.renderToolbar !== undefined && (
-        <div className='content-toolbar-sidebar-layout__toolbar'>
+      <div className='content-toolbar-sidebar-layout__toolbar'>
+        <HorizontalScroll>
           {props.renderToolbar}
-        </div>
+        </HorizontalScroll>
+      </div>
       )}
 
-      { props.renderSidebar !== undefined && (
-        <div className='content-toolbar-sidebar-layout__sidebar'>
-          {props.renderSidebar}
-        </div>
+      {props.renderSidebar !== undefined && (
+      <div className='content-toolbar-sidebar-layout__sidebar'>
+        {props.renderSidebar}
+      </div>
       )}
     </div>
   )

assets/js/src/core/components/horizontal-scroll/horizontal-scroll.stories.tsx

@@ -45,25 +45,7 @@ const exampleLargeTagList: TagProps[][] = [
     { children: 'Tag 6' }
   ]
 ]
-
-const exampleSmallTagList: TagProps[][] = [
-  [
-    { children: 'Tag 1' },
-    { children: 'Tag 2' },
-    { children: 'Tag 3' }
-  ]
-]
 export const _default = {
-  args: {
-    children: <TagList
-      itemGap={ 'extra-small' }
-      list={ exampleLargeTagList }
-      wrap={ false }
-              />
-  }
-}
-
-export const resizeable = {
   args: {
     children: <TagList
       itemGap={ 'extra-small' }
@@ -91,13 +73,3 @@ export const resizeable = {
     />
   )
 }
-export const ScrollNotRequired = {
-  args: {
-    children: <TagList
-      itemGap={ 'extra-small' }
-      list={ exampleSmallTagList }
-      wrap={ false }
-              />,
-    scrollWidth: 150
-  }
-}

assets/js/src/core/components/toolbar/toolbar.styles.tsx

@@ -17,14 +17,11 @@ export const useStyles = createStyles(({ token, css }) => {
   return {
     toolbar: css`
       width: 100%;
-      height: 48px;
-      border-top: 1px solid ${token.colorBorder};
-
+      height: 48px;      
       padding: ${token.paddingXS}px;
 
       &.toolbar--theme-primary {
-        // @todo: use token
-        background-color: #F5F3FA;
+        background-color: ${token.colorBgToolbar};
       }
 
       &.toolbar--theme-secondary {

assets/js/src/core/modules/asset/editor/toolbar/toolbar.tsx

@@ -71,21 +71,22 @@ export const Toolbar = (): React.JSX.Element => {
 
   return (
     <ToolbarView>
-      <ContextMenu />
       <Flex
-        className='overflow-x-auto'
-        style={ { height: '32px' } }
-        vertical={ false }
+        justify={ 'space-between' }
+        style={ { width: '100%' } }
       >
-        <EditorToolbarWorkflowMenu />
-        <Button
-          disabled={ !hasChanges || isLoading || isSchedulesLoading }
-          loading={ isLoading || isSchedulesLoading }
-          onClick={ onSaveClick }
-          type="primary"
-        >
-          {t('toolbar.save-and-publish')}
-        </Button>
+        <ContextMenu />
+        <Flex>
+          <EditorToolbarWorkflowMenu />
+          <Button
+            disabled={ !hasChanges || isLoading || isSchedulesLoading }
+            loading={ isLoading || isSchedulesLoading }
+            onClick={ onSaveClick }
+            type="primary"
+          >
+            {t('toolbar.save-and-publish')}
+          </Button>
+        </Flex>
       </Flex>
     </ToolbarView>
   )

assets/js/src/core/modules/asset/editor/toolbar/workflow-menu/workflow-menu.tsx

@@ -24,7 +24,6 @@ import { Dropdown, type DropdownMenuProps, type ItemType } from '@Pimcore/compon
 import { DropdownButton } from '@Pimcore/components/dropdown-button/dropdown-button'
 import { Icon } from '@Pimcore/components/icon/icon'
 import { useTranslation } from 'react-i18next'
-import { HorizontalScroll } from '@Pimcore/components/horizontal-scroll/horizontal-scroll'
 
 export const EditorToolbarWorkflowMenu = (): React.JSX.Element => {
   const { t } = useTranslation()
@@ -88,17 +87,14 @@ export const EditorToolbarWorkflowMenu = (): React.JSX.Element => {
   return (
     <Flex
       align={ 'center' }
-      className='overflow-x-auto'
       justify={ 'flex-end' }
     >
       {!isLoading && (
-      <HorizontalScroll>
-        <TagList
-          itemGap={ 'extra-small' }
-          list={ getVisibleWorkflowStatus() }
-          wrap={ false }
-        />
-      </HorizontalScroll>
+      <TagList
+        itemGap={ 'extra-small' }
+        list={ getVisibleWorkflowStatus() }
+        wrap={ false }
+      />
       )}
       <Dropdown
         menu={ { items } }

assets/js/src/core/modules/element/editor/layouts/tabs-toolbar-view.styles.ts

@@ -33,8 +33,11 @@ export const useStyles = createStyles(({ token, css }) => {
 
       .tabs-toolbar-layout__toolbar {
         display: flex;
-        overflow: hidden;
+        position: relative;
+        overflow-y: clip;
         height: ${token.sizeXXL}px;
+        background-color: ${token.colorBgToolbar};
+        border-top: 1px solid ${token.colorBorder};
         width: 100%;
       }
     `

assets/js/src/core/modules/element/editor/layouts/tabs-toolbar-view.tsx

@@ -13,6 +13,7 @@
 
 import React, { type ReactNode } from 'react'
 import { useStyles } from './tabs-toolbar-view.styles'
+import { HorizontalScroll } from '@Pimcore/components/horizontal-scroll/horizontal-scroll'
 
 export interface TabbarToolbarViewProps {
   renderTabbar: ReactNode
@@ -28,8 +29,10 @@ const TabsToolbarView = (props: TabbarToolbarViewProps): React.JSX.Element => {
         {props.renderTabbar}
       </div>
 
-      <div className='tabs-toolbar-layout__toolbar'>
-        {props.renderToolbar}
+      <div className={ 'tabs-toolbar-layout__toolbar' }>
+        <HorizontalScroll>
+          {props.renderToolbar}
+        </HorizontalScroll>
       </div>
     </div>
   )

public/build/8042aa5e-6795-4392-96cb-00c3542c9d8e/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/8042aa5e-6795-4392-96cb-00c3542c9d8e/main.js"
+      ]
+    }
+  }
+}

public/build/8042aa5e-6795-4392-96cb-00c3542c9d8e/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/8042aa5e-6795-4392-96cb-00c3542c9d8e/main.js": "/bundles/pimcorestudioui/build/8042aa5e-6795-4392-96cb-00c3542c9d8e/main.js"
+}

public/build/ace8b035-44fc-463f-9505-ee77cbbf5957/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/ace8b035-44fc-463f-9505-ee77cbbf5957/vendor.js"
+      ]
+    }
+  }
+}

public/build/ace8b035-44fc-463f-9505-ee77cbbf5957/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/ace8b035-44fc-463f-9505-ee77cbbf5957/vendor.js": "/bundles/pimcorestudioui/build/ace8b035-44fc-463f-9505-ee77cbbf5957/vendor.js"
+}