fix(ui): uniform-size checkboxes, vertically-aligned form labels, and fixes for other UI imperfections/inconsistencies (#737)

src/components/TvDetails/TvCast/index.tsx

@@ -32,21 +32,23 @@ const TvCast: React.FC = () => {
 
   return (
     <>
-      <Header
-        subtext={
-          <Link href={`/tv/${data.id}`}>
-            <a className="hover:underline">{data.name}</a>
-          </Link>
-        }
-      >
-        {intl.formatMessage(messages.fullseriescast)}
-      </Header>
+      <div className="mt-1 mb-5">
+        <Header
+          subtext={
+            <Link href={`/tv/${data.id}`}>
+              <a className="hover:underline">{data.name}</a>
+            </Link>
+          }
+        >
+          {intl.formatMessage(messages.fullseriescast)}
+        </Header>
+      </div>
       <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
         {data?.credits.cast.map((person) => {
           return (
             <li
               key={person.id}
-              className="col-span-1 flex flex-col text-center items-center"
+              className="flex flex-col items-center col-span-1 text-center"
             >
               <PersonCard
                 name={person.name}