fix views layout

Author: Davy-c

src/cloud/components/Views/EditableDocItemContainer.tsx

@@ -22,6 +22,7 @@ import { prepareDocPropsForAPI } from '../../lib/props'
 import { GetDocResponseBody } from '../../api/teams/docs'
 import { getDocContent } from '../../lib/utils/patterns'
 import { BulkApiActionRes } from '../../../design/lib/hooks/useBulkApi'
+import { usePage } from '../../lib/stores/pageStore'
 
 interface ItemProps {
   doc: SerializedDocWithSupplemental
@@ -33,6 +34,7 @@ const EditableDocItemContainer = ({ doc, children }: ItemProps) => {
   const [showingContextMenuActions, setShowingContextMenuActions] =
     useState<boolean>(false)
 
+  const { currentUserIsCoreMember } = usePage()
   const { createDoc, updateDoc, deleteDocApi, getUpdatedDocApi, sendingMap } =
     useCloudApi()
   const { translate } = useI18n()
@@ -117,6 +119,10 @@ const EditableDocItemContainer = ({ doc, children }: ItemProps) => {
     [deleteDocApi, popup, translate, onDocDuplicate]
   )
 
+  if (!currentUserIsCoreMember) {
+    return <ItemContainer className='item__container'>{children}</ItemContainer>
+  }
+
   const showInput = !sendingMap.has(doc.id) && editingItemTitle
   return (
     <ItemContainer

src/cloud/components/Views/List/ListViewItem.tsx

@@ -114,7 +114,7 @@ const ListViewItem: AppComponent<FolderListItemProps> = ({
         }
       }}
     >
-      {showCheckbox && (
+      {showCheckbox ? (
         <Checkbox
           className={cc([
             'list-view-item__checkbox',
@@ -123,6 +123,8 @@ const ListViewItem: AppComponent<FolderListItemProps> = ({
           checked={checked}
           toggle={() => onSelect(!checked)}
         />
+      ) : (
+        <div className='list-view-item__checkbox--placeholder' />
       )}
       {!hideOrderingHandle && (
         <div className='list-view-item__ordering-handle' {...listeners}>
@@ -222,6 +224,12 @@ const StyledContainer = styled.div`
     ${overflowEllipsis()}
   }
 
+  .list-view-item__checkbox--placeholder {
+    height: 1px;
+    width: ${({ theme }) => theme.sizes.spaces.md - 2}px;
+    margin-right: ${({ theme }) => theme.sizes.spaces.df}px;
+  }
+
   .list-view-item__checkbox {
     opacity: 0;
     margin-right: ${({ theme }) => theme.sizes.spaces.df}px;

src/design/components/organisms/Table/molecules/TableRow.tsx

@@ -21,8 +21,8 @@ const TableRow = ({
 }: InternalTableRowProps) => {
   return (
     <Container div className='table-row'>
-      <div className='table-row__checkbox__wrapper'>
-        {showCheckbox && onCheckboxToggle != null && (
+      {showCheckbox && onCheckboxToggle != null && (
+        <div className='table-row__checkbox__wrapper'>
           <Checkbox
             className={cc([
               'table-row__checkbox',
@@ -31,8 +31,8 @@ const TableRow = ({
             checked={checked}
             toggle={() => onCheckboxToggle(!checked)}
           />
-        )}
-      </div>
+        </div>
+      )}
       {cells.map((cell, i) => (
         <TableCell {...cell} width={widths[i]} key={`table-cell-${i}`} />
       ))}