開発日記-2024-01-20 / Separatorコンポーネントが消える問題

Separatorコンポーネントが消えてしまう問題について

shadcn/uiのSeparatorコンポーネントの縦線で区切るセパレータが表示されない問題が発生した。

orientation="vertical" の場合、tailwindの h-full が当てられているため、flexの子要素に <Separator orientation="vertical" /> を配置すると高さが 0 になって消えてしまうというのが原因だった。

<div className='flex items-center'>
  <div>xxxx</div>
  <div className='h-4'>
    <Separator orientation='vertical' />
  </div>
  <div>xxxx</div>
</div>

このような方法で、とりあえず表示できる。Next UIのDividerコンポーネントも同じようなことが起きる。

Front Matter CMSのカテゴリの設定

一つだけ選択するタイプのカテゴリのフィールド設定:

{
  "title": "Category",
  "name": "category",
  "type": "categories",
  "taxonomyLimit": 1,
  "singleValueAsString": true
},