Fix behavior of version accordions

assets/js/src/core/components/accordion/accordion.styles.ts

@@ -67,7 +67,7 @@ export const useStyles = createStyles(({ token, css }) => {
             > .ant-collapse-header {
                 display: inline-flex;
                 width: 100%;
-                align-items: center;
+                align-items: baseline;
 
                 > .ant-collapse-header-text {
                     margin-inline-end: 0;

assets/js/src/core/components/accordion/accordion.tsx

@@ -89,6 +89,7 @@ export const Accordion = ({
           role={ 'button' }
           size="small"
           type={ 'text' }
+          variant='minimal'
         />
       )
     }
@@ -107,8 +108,7 @@ export const Accordion = ({
       className: itemClassNames.join(' '),
       label: <>
         <Flex
-          align={ 'center' }
-          vertical={ false }
+          align={ 'baseline' }
         >
           {expandIconPosition === 'start' && (item.children !== null) && !(item.disabled === true) &&
                         chevronButton()}

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/versions/create-version-accordion-item-functions.tsx

@@ -25,6 +25,7 @@ import { Flex } from '@Pimcore/components/flex/flex'
 import { Space } from '@Pimcore/components/space/space'
 import { Tag } from '@Pimcore/components/tag/tag'
 import { useTranslation } from 'react-i18next'
+import { Box } from '@Pimcore/components/box/box'
 
 interface VersionIdentifiers {
   id: number
@@ -82,12 +83,18 @@ export const createVersionAccordionItem = ({
     return (
       <div>
         {selectable && (
-          <Checkbox
-            checked={ selected }
-            onChange={ () => {
-              selectVersion(vId)
-            } }
-          />
+          <Box
+            inline
+            padding={ { right: 'extra-small' } }
+          >
+            <Checkbox
+              checked={ selected }
+              onChange={ () => {
+                selectVersion(vId)
+              } }
+            />
+          </Box>
+
         )}
         <span className={ 'title' }>
           {`${t('version.version')} ${version.versionCount} | ${formatDateTime({
@@ -115,15 +122,17 @@ export const createVersionAccordionItem = ({
 
   const Extra = (): React.JSX.Element => {
     const { t } = useTranslation()
-    const color = published ? 'success' : 'blue'
-    const icon = published ? 'world' : 'user'
+
+    if (!published) {
+      return <></>
+    }
 
     return (
       <Tag
-        color={ color }
-        iconName={ icon }
+        color={ 'success' }
+        iconName={ 'world' }
       >
-        { published ? t('version.published') : t('version.own-draft') }
+        {t('version.published')}
       </Tag>
     )
   }
@@ -151,7 +160,7 @@ export const createVersionAccordionItem = ({
         vertical
       >
         <Flex
-          align='center'
+          align='top'
           justify='space-between'
         >
           <Tag className={ 'id-tag' }>ID: {version.id}</Tag>

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/versions/version-api-slice-enhanced.ts

@@ -43,4 +43,11 @@ export const api = baseApi.enhanceEndpoints({
 })
 
 export type * from './version-api-slice.gen'
-export const { useVersionAssetDownloadByIdQuery, useVersionCleanupForElementByTypeAndIdMutation, useVersionDeleteByIdMutation, useVersionGetByIdQuery, useVersionGetCollectionForElementByTypeAndIdQuery, useVersionPublishByIdMutation, useVersionUpdateByIdMutation } = api
+export const {
+  useVersionAssetDownloadByIdQuery,
+  useVersionCleanupForElementByTypeAndIdMutation,
+  useVersionDeleteByIdMutation, useVersionGetByIdQuery,
+  useVersionGetCollectionForElementByTypeAndIdQuery,
+  useVersionPublishByIdMutation,
+  useVersionUpdateByIdMutation
+} = api

public/build/2eddae9d-bb1e-4618-a932-83576b82b749/entrypoints.json

@@ -0,0 +1,14 @@
+{
+  "entrypoints": {
+    "main": {
+      "css": [
+        "http://localhost:3030/build/2eddae9d-bb1e-4618-a932-83576b82b749/vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-41eabe.css",
+        "http://localhost:3030/build/2eddae9d-bb1e-4618-a932-83576b82b749/main.css"
+      ],
+      "js": [
+        "http://localhost:3030/build/2eddae9d-bb1e-4618-a932-83576b82b749/vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-41eabe.js",
+        "http://localhost:3030/build/2eddae9d-bb1e-4618-a932-83576b82b749/main.js"
+      ]
+    }
+  }
+}