Truncate formname fixes #56 (#60)

* truncate in formlist

* truncate in breadcrumbs

components/FormList.tsx

@@ -37,7 +37,7 @@ export default function FormList() {
 
   return (
     <>
-      <div className="h-full py-8">
+      <div className="h-full px-6 py-8">
         {forms &&
           (forms.length === 0 ? (
             <div className="mt-5 text-center">
@@ -53,10 +53,10 @@ export default function FormList() {
               </EmptyPageFiller>
             </div>
           ) : (
-            <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 place-content-stretch ">
+            <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 place-content-stretch ">
               <button onClick={() => newForm()}>
-                <li className="col-span-1">
-                  <div className="overflow-hidden font-light text-white rounded-md shadow bg-snoopfade">
+                <li className="h-56 col-span-1">
+                  <div className="flex items-center justify-center h-full overflow-hidden font-light text-white rounded-md shadow bg-snoopfade">
                     <div className="px-4 py-8 sm:p-14">
                       <PlusIcon className="mx-auto w-14 h-14 stroke-thin" />
                       create form
@@ -67,10 +67,10 @@ export default function FormList() {
               {forms
                 .sort((a, b) => b.updatedAt - a.updatedAt)
                 .map((form, formIdx) => (
-                  <li key={form.id} className="relative col-span-1 ">
+                  <li key={form.id} className="relative h-56 col-span-1">
                     <div className="flex flex-col justify-between h-full bg-white rounded-md shadow">
-                      <div className="px-4 py-5 text-lg sm:p-6">
-                        {form.name}
+                      <div className="p-6">
+                        <p className="text-lg line-clamp-3">{form.name}</p>
                       </div>
                       <Link href={`/forms/${form.id}`}>
                         <a className="absolute w-full h-full" />

components/layout/BaseLayoutManagement.tsx

@@ -38,11 +38,11 @@ export default function BaseLayoutManagement({
           "flex h-full"
         )}
       >
-        <div className="flex flex-col flex-1 h-full">
+        <div className="flex flex-col flex-1 w-full h-full">
           <header className="w-full">
             <div className="relative z-10 flex flex-shrink-0 h-16 bg-white border-b shadow-sm border-ui-gray-light">
-              <div className="flex justify-between flex-1">
-                <div className="flex flex-1 space-x-8">
+              <div className="grid w-full grid-cols-2 sm:grid-cols-3">
+                <div className="flex-1 hidden space-x-8 sm:flex">
                   <NewFormNavButton />
                   <MenuBreadcrumbs breadcrumbs={breadcrumbs} />
                 </div>

components/layout/MenuBreadcrumbs.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function MenuBreadcrumbs({ breadcrumbs }) {
   return (
-    <div className="hidden sm:flex sm:flex-1">
+    <div className="hidden overflow-hidden sm:flex sm:flex-1 text-ellipsis">
       <nav className="hidden lg:flex" aria-label="Breadcrumb">
         <ol className="flex items-center space-x-4">
           <li>
@@ -33,7 +33,7 @@ export default function MenuBreadcrumbs({ breadcrumbs }) {
                 </svg>
                 <a
                   href={crumb.href}
-                  className="ml-4 text-sm font-medium text-ui-gray-dark hover:text-ui-gray-dark"
+                  className="ml-4 text-sm font-medium truncate text-ui-gray-dark hover:text-ui-gray-dark"
                 >
                   {crumb.name}
                 </a>

components/layout/NewFormNavButton.tsx

@@ -11,7 +11,7 @@ export default function NewFormNavButton({}) {
         className="items-center hidden text-sm border-r border-ui-gray-light sm:flex bg-ui-gray-lighter text-ui-gray-dark hover:text-white hover:bg-red-500"
         onClick={() => setOpenNewFormModal(true)}
       >
-        <nav className="hidden lg:flex" aria-label="Breadcrumb">
+        <nav className="hidden sm:flex" aria-label="Breadcrumb">
           <ol className="flex items-center space-x-4">
             <li>
               <div className="inline-flex items-center px-6 py-2 text-sm font-medium leading-4 bg-transparent border border-transparent hover:text-white focus:outline-none">

package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.1",
+    "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.2",
     "@types/bcryptjs": "^2.4.2",
     "@types/node": "17.0.32",

tailwind.config.js

@@ -1,3 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
@@ -187,5 +189,9 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/line-clamp"),
+  ],
 };

yarn.lock

@@ -259,6 +259,11 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tailwindcss/line-clamp@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.0.tgz#03353e31e77636b785f2336e8c978502cec1de81"
+  integrity sha512-HQZo6gfx1D0+DU3nWlNLD5iA6Ef4JAXh0LeD8lOGrJwEDBwwJNKQza6WoXhhY1uQrxOuU8ROxV7CqiQV4CoiLw==
+
 "@tailwindcss/typography@^0.5.2":
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.4.tgz#ad8c9e6808bae297bb7826742e4789f2a9f09a48"