@cloud-ru/ds-markdown 1.0.0

package/src/components/Toolbar/hooks/useToolbarOverflow.ts

@@ -0,0 +1,102 @@
+import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useRef, useState } from 'react';
+
+import { ToolbarItemId } from '../../../types';
+
+/**
+ * Считает, сколько кнопок тулбара помещается по ширине, остальные — в overflow («Ещё»).
+ * Возвращает `rootRef` (корень тулбара, под ResizeObserver), `moreButtonRef` (для измерения
+ * «веса» overflow-группы) и `visibleCount` (число видимых кнопок).
+ *
+ * Края слотов кэшируются в полной раскладке (все кнопки, без More) и переиспользуются при
+ * пересчёте — поэтому не нужно арифметически приближать гэпы/дивайдеры.
+ */
+export function useToolbarOverflow(items: ToolbarItemId[]) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const moreButtonRef = useRef<HTMLElement>(null);
+  // Правый край каждого слота (отн. левого края тулбара), измеренный в ПОЛНОЙ раскладке.
+  const slotEdgesRef = useRef<Map<string, number>>(new Map());
+  // Реальная ширина группы «дивайдер + More» — измеряется, когда More присутствует в DOM.
+  const moreReserveRef = useRef(48);
+  const [visibleCount, setVisibleCount] = useState(items.length);
+
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+
+    if (!root) {
+      return;
+    }
+
+    const edges = slotEdgesRef.current;
+    edges.clear();
+
+    let rafId = 0;
+
+    const measure = () => {
+      const rootRect = root.getBoundingClientRect();
+      const padRight = parseFloat(getComputedStyle(root).paddingRight) || 0;
+      // Правая граница контентной области тулбара (отн. левого края root).
+      const limit = root.clientWidth - padRight;
+      const slots = Array.from(root.querySelectorAll<HTMLElement>('[data-toolbar-slot]'));
+
+      // Кэшируем края только в полной раскладке (все items, без More) — иначе край
+      // зависел бы от текущего visibleCount/набора дивайдеров и был бы неверным для пересчёта.
+      if (slots.length === items.length) {
+        for (const slot of slots) {
+          const id = slot.dataset.toolbarItem;
+          if (id) {
+            edges.set(id, slot.getBoundingClientRect().right - rootRect.left);
+          }
+        }
+      }
+
+      // Реальный «вес» More-группы (дивайдер + гэпы + кнопка): от правого края последнего
+      // видимого слота до правого края More-кнопки. Уточняется, как только More появляется.
+      const moreEl = moreButtonRef.current;
+      if (moreEl && slots.length > 0) {
+        const lastRight =
+          slots[slots.length - 1].getBoundingClientRect().right - rootRect.left - moreReserveRef.current;
+        moreReserveRef.current = moreEl.getBoundingClientRect().right - rootRect.left - lastRight;
+      }
+
+      // Края ещё не собраны (нет полного рендера, напр. items только что изменились) —
+      // показываем всё и перезамеряем на следующем кадре, когда все слоты окажутся в DOM.
+      if (!items.every(id => edges.has(id))) {
+        setVisibleCount(items.length);
+        rafId = requestAnimationFrame(measure);
+        return;
+      }
+
+      // Всё помещается без overflow — показываем все кнопки, без More.
+      const fullRight = edges.get(items[items.length - 1]) ?? 0;
+      if (fullRight <= limit) {
+        setVisibleCount(items.length);
+        return;
+      }
+
+      // Иначе — максимум k кнопок, после которых ещё влезает группа «│ More».
+      const reserve = moreReserveRef.current;
+      let fits = 0;
+      for (const id of items) {
+        if ((edges.get(id) ?? 0) + reserve > limit) {
+          break;
+        }
+
+        fits += 1;
+      }
+      setVisibleCount(Math.max(fits, 1));
+    };
+
+    measure();
+
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+
+    return () => {
+      observer.disconnect();
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [items]);
+
+  return { rootRef, moreButtonRef, visibleCount };
+}

package/src/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+export * from './Toolbar';
+export { DEFAULT_TOOLBAR } from './constants';

package/src/components/Toolbar/styles.module.scss

@@ -0,0 +1,29 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/components/markdown.module' as md;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/field.module' as field;
+
+// Wrapper: размещает `Buttons` + опциональный `More`-кнопку справа.
+// Gap и дивайдеры строки кнопок живут в helperComponents/Buttons.
+.root {
+  overflow: hidden;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+
+  box-sizing: border-box;
+
+  // Padding строки — на обёртке, а не на helper
+  // `Buttons`, чтобы More-кнопка справа не прилипала к краю fieldWrapper'а.
+  padding: md.$sn-markdown-anatomy-size-buttons-paddingTop md.$sn-markdown-anatomy-size-buttons-paddingHorizontal
+    md.$sn-markdown-anatomy-size-buttons-paddingBottom;
+}
+
+// Trigger-обёртка Tooltip — inline span; без inline-flex кнопки в строке
+// выравниваются по baseline текста и «прыгают» по вертикали.
+.tooltipTrigger {
+  display: inline-flex;
+}
+
+.tableCustomizeOption {
+  align-items: flex-start;
+  align-self: center;
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+// Публичные компоненты пакета. Toolbar — внутренний,
+// импортируется напрямую по относительным путям и наружу не экспортируется.
+export * from './Markdown';
+export * from './MarkdownEditor';

package/src/constants.ts

@@ -0,0 +1,67 @@
+export const TOOLBAR_ITEM = {
+  Heading: 'heading',
+  Bold: 'bold',
+  Italic: 'italic',
+  Strikethrough: 'strikethrough',
+  Link: 'link',
+  InlineCode: 'inline-code',
+  BulletList: 'bullet-list',
+  OrderedList: 'ordered-list',
+  BlockQuote: 'block-quote',
+  BlockCode: 'block-code',
+  Table: 'table',
+  Image: 'image',
+} as const;
+
+export const HEADING_LEVEL = { H1: 1, H2: 2, H3: 3, H4: 4, H5: 5 } as const;
+
+export const ON_CHANGE_DEBOUNCE_MS = 150;
+
+export const TEST_IDS = {
+  viewer: 'markdown',
+  viewerCodeCopy: 'markdown__code-copy',
+  editor: 'markdown-editor',
+  editorHeader: 'markdown-editor__header',
+  editorPreviewToggle: 'markdown-editor__preview-toggle',
+  editorLabel: 'markdown-editor__label',
+  editorClear: 'markdown-editor__clear',
+  editorContent: 'markdown-editor__content',
+  // Оболочка поля (FieldShell из @cloud-ru/ds-fields) — общая для raw и preview.
+  editorField: 'markdown-editor__field',
+  // Нативная textarea в raw-режиме.
+  editorRawInput: 'markdown-editor__raw-input',
+  toolbar: 'markdown-editor__toolbar',
+  toolbarButton: 'markdown-editor__toolbar-button',
+  toolbarMore: 'markdown-editor__toolbar-more',
+  toolbarMoreList: 'markdown-editor__toolbar-more-list',
+  toolbarHeading: 'markdown-editor__toolbar-heading',
+  headingDropdown: 'markdown-editor__heading-dropdown',
+  headingOption: 'markdown-editor__heading-option',
+  tableGridPicker: 'markdown-editor__table-picker',
+  tablePickerCell: 'markdown-editor__table-cell',
+  tableCustomize: 'markdown-editor__table-customize',
+  customizeModal: 'markdown-editor__customize-table',
+  customizeColumns: 'markdown-editor__customize-table-columns',
+  customizeRows: 'markdown-editor__customize-table-rows',
+  customizeCancel: 'markdown-editor__customize-table-cancel',
+  customizeAdd: 'markdown-editor__customize-table-add',
+  linkModal: 'markdown-editor__link-modal',
+  linkModalUrl: 'markdown-editor__link-modal-url',
+  linkModalTitle: 'markdown-editor__link-modal-title',
+  linkModalCancel: 'markdown-editor__link-modal-cancel',
+  linkModalAdd: 'markdown-editor__link-modal-add',
+  imageModal: 'markdown-editor__image-modal',
+  imageModalUrl: 'markdown-editor__image-modal-url',
+  imageModalAlt: 'markdown-editor__image-modal-alt',
+  imageModalCancel: 'markdown-editor__image-modal-cancel',
+  imageModalAdd: 'markdown-editor__image-modal-add',
+} as const;
+
+/** Стабильный data-test-id конкретной кнопки тулбара (`markdown-editor__toolbar-button--bold`). */
+export const toolbarButtonTestId = (item: string) => `${TEST_IDS.toolbarButton}--${item}`;
+
+/** data-test-id пункта heading-дропдауна (`…__heading-option--paragraph` | `…--2`). */
+export const headingOptionTestId = (level: number | 'paragraph') => `${TEST_IDS.headingOption}--${level}`;
+
+/** data-test-id ячейки table-picker'а (`…__table-cell--2x3`). */
+export const tableCellTestId = (rows: number, cols: number) => `${TEST_IDS.tablePickerCell}--${rows}x${cols}`;

package/src/helperComponents/ButtonHeading/ButtonHeading.tsx

@@ -0,0 +1,100 @@
+import {
+  Heading1SVG,
+  Heading2SVG,
+  Heading3SVG,
+  Heading4SVG,
+  Heading5SVG,
+  HeadingSVG,
+} from '@cloud-ru/ds-icons/interface/system';
+import { BaseItemProps, Droplist } from '@cloud-ru/ds-list';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { ComponentType, useState } from 'react';
+
+import { headingOptionTestId, TEST_IDS, TOOLBAR_ITEM } from '../../constants';
+import { markdownLocale } from '../../locale';
+import { ToolbarApi } from '../../toolbarApi';
+import { HeadingLevel } from '../../types';
+import { PrivateButton } from '../PrivateButton';
+import styles from './styles.module.scss';
+
+// Кнопка-триггер выбора уровня заголовка: иконка текущего уровня. Открывает Droplist со списком уровней.
+
+const HEADING_LEVELS: HeadingLevel[] = [1, 2, 3, 4, 5];
+
+const ICON_FOR: Record<HeadingLevel, ComponentType> = {
+  1: Heading1SVG,
+  2: Heading2SVG,
+  3: Heading3SVG,
+  4: Heading4SVG,
+  5: Heading5SVG,
+};
+
+export type ButtonHeadingProps = {
+  /** Бэкенд команд тулбара (WYSIWYG либо raw markdown). */
+  api: ToolbarApi;
+};
+
+export function ButtonHeading({ api }: ButtonHeadingProps) {
+  const portalContext = usePortalContext();
+  const { t } = markdownLocale.useTranslations();
+  const [open, setOpen] = useState(false);
+  const activeLevel = HEADING_LEVELS.find(lvl => api.isHeadingActive(lvl));
+  const TriggerIcon = activeLevel != null ? ICON_FOR[activeLevel] : HeadingSVG;
+
+  const selectLevel = (lvl: HeadingLevel | null) => {
+    if (lvl == null) {
+      api.setParagraph();
+    } else {
+      api.toggleHeading(lvl);
+    }
+
+    setOpen(false);
+  };
+
+  const items: BaseItemProps[] = [
+    {
+      id: 'paragraph',
+      content: { label: 'Paragraph' },
+      checked: activeLevel == null,
+      onClick: () => selectLevel(null),
+      'data-test-id': headingOptionTestId('paragraph'),
+    },
+    ...HEADING_LEVELS.map((lvl): BaseItemProps => {
+      const Icon = ICON_FOR[lvl];
+      return {
+        id: `heading-${lvl}`,
+        beforeContent: <Icon />,
+        content: { label: `Heading ${lvl}` },
+        checked: activeLevel === lvl,
+        onClick: () => selectLevel(lvl),
+        'data-test-id': headingOptionTestId(lvl),
+      };
+    }),
+  ];
+
+  return (
+    <Droplist
+      size='m'
+      selection={{ mode: 'single', value: activeLevel }}
+      container={portalContext}
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      items={items}
+      triggerClassName={styles.trigger}
+      data-test-id={TEST_IDS.headingDropdown}
+    >
+      <PrivateButton
+        icon={<TriggerIcon />}
+        tip={{ title: t('toolbar.heading') }}
+        withChevron
+        checked={activeLevel != null}
+        aria-label={t('toolbar.heading')}
+        data-toolbar-slot
+        data-toolbar-item={TOOLBAR_ITEM.Heading}
+        data-test-id={TEST_IDS.toolbarHeading}
+        aria-expanded={open}
+      />
+    </Droplist>
+  );
+}

package/src/helperComponents/ButtonHeading/index.ts

@@ -0,0 +1 @@
+export * from './ButtonHeading';

package/src/helperComponents/ButtonHeading/styles.module.scss

@@ -0,0 +1,5 @@
+// Trigger-обёртка Droplist — inline span; без inline-flex кнопка в строке тулбара
+// выравнивается по baseline текста и «прыгает» по вертикали.
+.trigger {
+  display: inline-flex;
+}

package/src/helperComponents/Buttons/Buttons.tsx

@@ -0,0 +1,30 @@
+import { Divider } from '@cloud-ru/ds-divider';
+import { ReactNode } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+// Toolbar-строка: группы кнопок с дивайдерами.
+export type ButtonsProps = {
+  children: ReactNode;
+};
+
+export function Buttons({ children }: ButtonsProps) {
+  return (
+    <div className={styles.root} data-test-id={TEST_IDS.toolbar} role='toolbar'>
+      {children}
+    </div>
+  );
+}
+
+export type ButtonsGroupProps = {
+  children: ReactNode;
+};
+
+export function ButtonsGroup({ children }: ButtonsGroupProps) {
+  return <div className={styles.group}>{children}</div>;
+}
+
+export function ButtonsDivider() {
+  return <Divider orientation='vertical' className={styles.divider} />;
+}

package/src/helperComponents/Buttons/index.ts

@@ -0,0 +1 @@
+export * from './Buttons';

package/src/helperComponents/Buttons/styles.module.scss

@@ -0,0 +1,26 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/markdown.module' as md;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/divider.module' as divider;
+
+// Padding всей строки живёт на Toolbar-обёртке,
+// чтобы покрывать и More-кнопку, которая рендерится рядом с этой группой.
+.root {
+  overflow: hidden;
+  display: flex;
+  flex: 0 0 auto;
+  gap: md.$sn-markdown-anatomy-size-buttons-gap;
+
+  box-sizing: border-box;
+}
+
+.group {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+}
+
+.divider {
+  &[data-orientation='vertical'] {
+    height: auto;
+  }
+}

package/src/helperComponents/Modals/CustomizeTableModal.tsx

@@ -0,0 +1,82 @@
+import { ButtonGroup } from '@cloud-ru/ds-button';
+import { FieldStepper } from '@cloud-ru/ds-fields';
+import { Modal } from '@cloud-ru/ds-modal';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { useEffect, useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { markdownLocale } from '../../locale';
+import styles from './styles.module.scss';
+
+type CustomizeTableModalProps = {
+  open: boolean;
+  onClose(): void;
+  /** Вставить таблицу заданного размера. */
+  onSubmit(rows: number, cols: number): void;
+};
+
+const DEFAULT_SIZE = 1;
+
+export function CustomizeTableModal({ open, onClose, onSubmit }: CustomizeTableModalProps) {
+  const { t } = markdownLocale.useTranslations();
+  const portalContext = usePortalContext();
+  const [columns, setColumns] = useState(DEFAULT_SIZE);
+  const [rows, setRows] = useState(DEFAULT_SIZE);
+
+  // Сбрасываем значения при каждом открытии, чтобы модалка не помнила прошлый ввод.
+  useEffect(() => {
+    if (open) {
+      setColumns(DEFAULT_SIZE);
+      setRows(DEFAULT_SIZE);
+    }
+  }, [open]);
+
+  const handleAdd = () => onSubmit(rows, columns);
+
+  return (
+    // TODO: заменить на адаптив
+    <Modal
+      open={open}
+      onClose={onClose}
+      container={portalContext.current ?? undefined}
+      title={t('table.customize')}
+      data-test-id={TEST_IDS.customizeModal}
+      content={
+        <div className={styles.fields}>
+          <FieldStepper
+            size='m'
+            className={styles.field}
+            label={t('table.columns')}
+            min={DEFAULT_SIZE}
+            value={columns}
+            onChange={setColumns}
+            data-test-id={TEST_IDS.customizeColumns}
+          />
+          <FieldStepper
+            size='m'
+            className={styles.field}
+            label={t('table.rows')}
+            min={DEFAULT_SIZE}
+            value={rows}
+            onChange={setRows}
+            data-test-id={TEST_IDS.customizeRows}
+          />
+        </div>
+      }
+      footer={
+        <ButtonGroup
+          size='m'
+          primaryAction={{ label: t('add'), onClick: handleAdd, 'data-test-id': TEST_IDS.customizeAdd }}
+          secondaryAction={{
+            appearance: 'neutral',
+            view: 'outline',
+            label: t('cancel'),
+            onClick: onClose,
+            'data-test-id': TEST_IDS.customizeCancel,
+          }}
+          className={styles.buttons}
+        />
+      }
+    />
+  );
+}

package/src/helperComponents/Modals/ImageModal.tsx

@@ -0,0 +1,84 @@
+import { ButtonGroup } from '@cloud-ru/ds-button';
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import { Modal } from '@cloud-ru/ds-modal';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { useEffect, useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { markdownLocale } from '../../locale';
+import styles from './styles.module.scss';
+
+// Модалка вставки изображения (вместо window.prompt): поля URL и Alt + кнопки Отмена/Добавить.
+type ImageModalProps = {
+  open: boolean;
+  onClose(): void;
+  onSubmit(url: string, alt: string): void;
+};
+
+export function ImageModal({ open, onClose, onSubmit }: ImageModalProps) {
+  const { t } = markdownLocale.useTranslations();
+  const portalContext = usePortalContext();
+  const [url, setUrl] = useState('');
+  const [alt, setAlt] = useState('');
+
+  // Сбрасываем поля при каждом открытии.
+  useEffect(() => {
+    if (open) {
+      setUrl('');
+      setAlt('');
+    }
+  }, [open]);
+
+  const trimmedUrl = url.trim();
+  const handleAdd = () => onSubmit(trimmedUrl, alt.trim() || 'image');
+
+  return (
+    // TODO: заменить на адаптив
+    <Modal
+      open={open}
+      onClose={onClose}
+      container={portalContext.current ?? undefined}
+      title={t('image.title')}
+      data-test-id={TEST_IDS.imageModal}
+      content={
+        <div className={styles.fields} data-column={true}>
+          <FieldCombo
+            size='m'
+            label={t('image.url')}
+            placeholder={t('image.placeholder')}
+            value={url}
+            onChange={setUrl}
+            autoFocus
+            data-test-id={TEST_IDS.imageModalUrl}
+          />
+          <FieldCombo
+            size='m'
+            label={t('image.alt')}
+            value={alt}
+            onChange={setAlt}
+            data-test-id={TEST_IDS.imageModalAlt}
+          />
+        </div>
+      }
+      footer={
+        <ButtonGroup
+          size='m'
+          primaryAction={{
+            label: t('add'),
+            onClick: handleAdd,
+            disabled: trimmedUrl === '',
+            'data-test-id': TEST_IDS.imageModalAdd,
+          }}
+          secondaryAction={{
+            appearance: 'neutral',
+            view: 'outline',
+            label: t('cancel'),
+            onClick: onClose,
+            'data-test-id': TEST_IDS.imageModalCancel,
+          }}
+          className={styles.buttons}
+        />
+      }
+    />
+  );
+}

package/src/helperComponents/Modals/LinkModal.tsx

@@ -0,0 +1,92 @@
+import { ButtonGroup } from '@cloud-ru/ds-button';
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import { Modal } from '@cloud-ru/ds-modal';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { useEffect, useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { markdownLocale } from '../../locale';
+import styles from './styles.module.scss';
+
+export type LinkProps = {
+  href?: string;
+  title?: string;
+};
+
+// Модалка добавления ссылки (вместо window.prompt): поле URL + кнопки Отмена/Добавить.
+type LinkModalProps = {
+  open: boolean;
+  /** Текущий href (для редактирования существующей ссылки). */
+  initial?: LinkProps;
+  onClose(): void;
+  onSubmit(props: LinkProps): void;
+};
+
+export function LinkModal({ open, initial, onClose, onSubmit }: LinkModalProps) {
+  const { t } = markdownLocale.useTranslations();
+  const portalContext = usePortalContext();
+  const [linkProps, setLinkProps] = useState<LinkProps | undefined>(initial);
+
+  // Префилл значением при каждом открытии (текущий href либо пусто).
+  useEffect(() => {
+    if (open) {
+      setLinkProps({ href: initial?.href, title: initial?.title });
+    }
+  }, [open, initial?.href, initial?.title]);
+
+  const trimmedUrl = linkProps?.href?.trim() ?? '';
+  const handleAdd = () => onSubmit({ href: trimmedUrl, title: linkProps?.title });
+
+  return (
+    // TODO: заменить на адаптив
+    <Modal
+      open={open}
+      onClose={onClose}
+      container={portalContext.current ?? undefined}
+      title={t('link.title')}
+      data-test-id={TEST_IDS.linkModal}
+      content={
+        <div className={styles.fields} data-column={true}>
+          <FieldCombo
+            size='m'
+            label={t('link.titleField.label')}
+            placeholder={t('link.titleField.placeholder')}
+            value={linkProps?.title ?? ''}
+            onChange={title => setLinkProps(prev => ({ ...prev, title }))}
+            autoFocus={!initial?.title}
+            data-test-id={TEST_IDS.linkModalTitle}
+          />
+
+          <FieldCombo
+            size='m'
+            label={t('link.urlField.label')}
+            placeholder={t('link.urlField.placeholder')}
+            value={linkProps?.href ?? ''}
+            autoFocus={Boolean(initial?.title)}
+            onChange={href => setLinkProps(prev => ({ ...prev, href }))}
+            data-test-id={TEST_IDS.linkModalUrl}
+          />
+        </div>
+      }
+      footer={
+        <ButtonGroup
+          size='m'
+          primaryAction={{
+            label: t('add'),
+            onClick: handleAdd,
+            disabled: trimmedUrl === '',
+            'data-test-id': TEST_IDS.linkModalAdd,
+          }}
+          secondaryAction={{
+            appearance: 'neutral',
+            view: 'outline',
+            label: t('cancel'),
+            onClick: onClose,
+            'data-test-id': TEST_IDS.linkModalCancel,
+          }}
+          className={styles.buttons}
+        />
+      }
+    />
+  );
+}

package/src/helperComponents/Modals/index.ts

@@ -0,0 +1,3 @@
+export * from './CustomizeTableModal';
+export * from './ImageModal';
+export * from './LinkModal';

package/src/helperComponents/Modals/styles.module.scss

@@ -0,0 +1,21 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+// Два FieldStepper (столбцы/строки) в ряд, gap 16.
+.fields {
+  display: flex;
+  gap: base.$sn-primitive-dimension-16;
+
+  &[data-column] {
+    flex-direction: column;
+  }
+}
+
+.field {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.buttons {
+  justify-content: flex-end;
+  width: 100%;
+}