fix(Cell): fix offset when no before (#7327)

* fix(Cell): fix offset when no before

* fix(Cell): add draggable and selectable variant + update screenshots

* fix: revert Readme.md changes

* chore: update screenshots

packages/vkui/src/components/Cell/Cell.e2e-playground.tsx

@@ -28,6 +28,10 @@ export const CellPlayground = (props: ComponentPlaygroundProps) => {
           children: ['Мария Саломея Склодовская-Кюри', 'Артур Стамбульцян'],
           multiline: [true, false],
         },
+        {
+          mode: ['selectable'],
+          children: ['Мария Саломея Склодовская-Кюри'],
+        },
       ]}
     >
       {(props: CellProps) => <Cell {...props} />}

packages/vkui/src/components/Cell/Cell.module.css

@@ -18,6 +18,11 @@
   margin-inline-end: var(--vkui--spacing_size_2xl);
 }
 
+.Cell__control--noBefore {
+  /* Когда в before нет ничего, кроме dragger или checkbox, нужно добавлять компенсированный отступ */
+  margin-inline-end: calc(var(--vkui--spacing_size_2xl) - var(--vkui--spacing_size_xl));
+}
+
 .Cell__content {
   max-inline-size: 100%;
   min-inline-size: 0;
@@ -52,6 +57,11 @@
   margin-inline-end: var(--vkui--spacing_size_xl);
 }
 
+.Cell--ios .Cell__control--noBefore {
+  /* Когда в before нет ничего, кроме dragger или checkbox, оставляем только отступ у before в SimpleCell */
+  margin-inline-end: 0;
+}
+
 .Cell--ios.Cell--removable .Cell__content {
   /* размер removable icon + icon margins*/
   padding-inline: 48px var(--vkui--size_base_padding_horizontal--regular);

packages/vkui/src/components/Cell/Cell.tsx

@@ -85,7 +85,10 @@ export const Cell: React.FC<CellProps> & {
   const dragger = draggable ? (
     <CellDragger
       elRef={rootElRef}
-      className={styles['Cell__dragger']}
+      className={classNames(
+        styles['Cell__dragger'],
+        !before && !selectable && styles['Cell__control--noBefore'],
+      )}
       disabled={disabled}
       onDragStateChange={setDragging}
       onDragFinish={onDragFinish}
@@ -104,7 +107,15 @@ export const Cell: React.FC<CellProps> & {
       disabled,
       onChange,
     };
-    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;
+    checkbox = (
+      <CellCheckbox
+        className={classNames(
+          styles['Cell__checkbox'],
+          !before && styles['Cell__control--noBefore'],
+        )}
+        {...checkboxProps}
+      />
+    );
   }
 
   const simpleCellDisabled =