From 94cee93ccb9e53b62d62d79c0ec7860ad1e0b42f Mon Sep 17 00:00:00 2001
From: sam <sam@sam.wf>
Date: Sun, 20 Nov 2022 22:43:21 +0100
Subject: [PATCH] fix(frontend): fix LabelsLine, change grid to flex in
 FieldCardGrid

---
 frontend/pages/u/[user]/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/u/[user]/index.tsx b/frontend/pages/u/[user]/index.tsx
index f0b3b5d..a1aa3bd 100644
--- a/frontend/pages/u/[user]/index.tsx
+++ b/frontend/pages/u/[user]/index.tsx
@@ -199,7 +199,7 @@ function LabelStatusIcon({ status }: { status: WordStatus }) {
 }
 
 function LabelsLine({ labels }: { labels: Name[] | Pronoun[] }) {
-  if (labels.length === 0) return <></>;
+  if (!labels?.length) return <></>;
   const status = labels[0].status;
   const text = labels
     .map((label) =>
@@ -227,7 +227,7 @@ function LabelLine({ label }: { label: Name | Pronoun }) {
 
 function FieldCardGrid({ fields }: { fields: Field[] }) {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-2">
+    <div className="flex flex-col md:flex-row gap-4 py-2 [&>*]:flex-1">
       {fields?.map((field, index) => (
         <FieldCard field={field} key={index} />
       ))}