Event row style improvements (#5533)

* Made full row of event type clickable, and fixed event type loader dimensions.

* Fixed skeletons for teams and workflows.

* Fixed skeleton for workflow detail page.

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -5,8 +5,8 @@ function SkeletonLoader() {
   return (
     <SkeletonContainer>
       <div className="mb-4 flex items-center">
-        <SkeletonAvatar className="h-2 w-2" />
+        <SkeletonAvatar className="h-8 w-8" />
-        <div className="space-y-1">
+        <div className="flex flex-col space-y-1">
           <SkeletonText className="h-4 w-16" />
           <SkeletonText className="h-4 w-24" />
         </div>
@@ -27,17 +27,17 @@ function SkeletonItem() {
     <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
       <div className="flex-grow truncate text-sm">
         <div>
-          <SkeletonText className="h-[5px] w-8" />
+          <SkeletonText className="h-5 w-32" />
         </div>
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
               <Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
-              <SkeletonText className="h-1 w-3" />
+              <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
               <Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
-              <SkeletonText className="h-1 w-4" />
+              <SkeletonText className="h-4 w-12" />
             </li>
           </ul>
         </div>

apps/web/pages/event-types/index.tsx

@@ -56,7 +56,7 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
   return (
     <Link href={`/event-types/${type.id}?tabName=setup`}>
       <a
-        className="overflow-hidden pr-4 text-sm"
+        className="w-full overflow-hidden pr-4 text-sm"
         title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}>
         <div>
           <span

packages/features/ee/teams/components/SkeletonloaderTeamList.tsx

@@ -19,18 +19,18 @@ function SkeletonItem() {
     <li className="group flex w-full items-center justify-between px-3 py-4">
       <div className="flex-grow truncate text-sm">
         <div className="flex justify-start space-x-2 px-2">
-          <SkeletonText className="h-3 w-3 rounded-full" />
+          <SkeletonText className="h-10 w-10 rounded-full" />
-          <div className="space-y-2">
+          <div className="flex flex-col space-y-2">
-            <SkeletonText className="h-1 w-8" />
+            <SkeletonText className="h-4 w-32" />
-            <SkeletonText className="h-1 w-4" />
+            <SkeletonText className="h-4 w-16" />
           </div>
         </div>
       </div>
       <div className="mt-4 hidden flex-shrink-0 pr-4 sm:mt-0 sm:ml-5 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
-          <SkeletonText className="h-1 w-3" />
+          <SkeletonText className="h-4 w-12" />
-          <SkeletonText className="h-1 w-1" />
+          <SkeletonText className="h-4 w-4" />
-          <SkeletonText className="h-1 w-1" />
+          <SkeletonText className="h-4 w-4" />
         </div>
       </div>
     </li>

packages/features/ee/workflows/components/v2/SkeletonLoaderEdit.tsx

@@ -3,8 +3,8 @@ import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
 function SkeletonLoader() {
   return (
     <SkeletonContainer>
-      <div className="mt-20 ml-2 md:flex">
+      <div className="ml-2 md:flex">
-        <div className="mr-6 md:flex-none">
+        <div className="mr-6 flex flex-col md:flex-none">
           <SkeletonText className="h-4 w-28" />
           <SkeletonText className="mt-2 mb-6 h-8 w-full md:w-64" />
           <SkeletonText className="h-4 w-28" />

packages/features/ee/workflows/components/v2/SkeletonLoaderList.tsx

@@ -3,7 +3,7 @@ import { SkeletonText } from "@calcom/ui/v2";
 
 function SkeletonLoader() {
   return (
-    <ul className="mt-5 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mt-20 sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />