fix(frontend): full season request modal fits on a smaller mobile UI (#535)

* fix(frontend): full season request modal fits on a smaller mobile UI

* fix(frontend): added responsive variant and removed unnecessary padding

* fix(frontend): added in responsive design

* fix(frontend): applied the same spacing from the discovery page to the requests/users pages

* fix(frontend): revered change to keep tables edge to edge on mobile

src/components/CollectionDetails/index.tsx

@@ -102,7 +102,7 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
 
   return (
     <div
-      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover sm:px-8 "
+      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
       style={{
         height: 493,
         backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

src/components/Common/List/index.tsx

@@ -7,7 +7,7 @@ interface ListItemProps {
 
 const ListItem: React.FC<ListItemProps> = ({ title, children }) => {
   return (
-    <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
+    <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4">
       <dt className="text-sm font-medium text-gray-200">{title}</dt>
       <dd className="mt-1 flex text-sm text-gray-400 sm:mt-0 sm:col-span-2">
         <span className="flex-grow">{children}</span>

src/components/Common/Modal/index.tsx

@@ -98,7 +98,7 @@ const Modal: React.FC<ModalProps> = ({
         show={!loading}
       >
         <div
-          className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
+          className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full max-h-full"
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
@@ -166,7 +166,7 @@ const Modal: React.FC<ModalProps> = ({
                 <Button
                   buttonType={cancelButtonType}
                   onClick={onCancel}
-                  className="ml-3 sm:ml-0 sm:px-4"
+                  className="ml-3 sm:ml-0"
                 >
                   {cancelText
                     ? cancelText

src/components/Common/SlideOver/index.tsx

@@ -61,7 +61,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
             >
               <div className="w-screen max-w-md" ref={slideoverRef}>
                 <div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
-                  <header className="px-4 py-6 space-y-1 bg-indigo-600 sm:px-6">
+                  <header className="px-4 py-6 space-y-1 bg-indigo-600">
                     <div className="flex items-center justify-between space-x-3">
                       <h2 className="text-lg font-medium leading-7 text-white">
                         {title}
@@ -97,7 +97,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
                       </div>
                     )}
                   </header>
-                  <div className="relative flex-1 px-4 py-6 text-white sm:px-6">
+                  <div className="relative flex-1 px-4 py-6 text-white">
                     {children}
                   </div>
                 </div>

src/components/Common/Table/index.tsx

@@ -71,8 +71,8 @@ const TD: React.FC<TDProps> = ({
 const Table: React.FC = ({ children }) => {
   return (
     <div className="flex flex-col">
-      <div className="my-2 overflow-x-auto -mx-6 sm:-mx-6 md:mx-4 lg:mx-4">
-        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+      <div className="my-2 overflow-x-auto -mx-6 md:mx-0 lg:mx-0">
+        <div className="py-2 align-middle inline-block min-w-full">
           <div className="shadow overflow-hidden sm:rounded-lg">
             <table className="min-w-full">{children}</table>
           </div>

src/components/Layout/index.tsx

@@ -55,8 +55,8 @@ const Layout: React.FC = ({ children }) => {
           className="relative z-0 top-16 focus:outline-none right-0"
           tabIndex={0}
         >
-          <div className="pt-2 pb-6 md:py-6">
-            <div className="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
+          <div className="pt-2 pb-6">
+            <div className="max-w-8xl mx-auto px-4">
               {router.pathname === '/' && hasPermission(Permission.ADMIN) && (
                 <div className="rounded-md bg-indigo-700 p-4 mt-2">
                   <div className="flex">

src/components/Login/index.tsx

@@ -51,7 +51,7 @@ const Login: React.FC = () => {
   }, [user, router]);
 
   return (
-    <div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900 sm:px-6 lg:px-8">
+    <div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900">
       <ImageFader
         backgroundImages={[
           '/images/rotate1.jpg',
@@ -65,7 +65,7 @@ const Login: React.FC = () => {
       <div className="absolute z-50 top-4 right-4">
         <LanguagePicker />
       </div>
-      <div className="relative z-40 px-4 sm:px-2 md:px-0 sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md">
         <img
           src="/logo.png"
           className="w-auto mx-auto max-h-32"
@@ -77,7 +77,7 @@ const Login: React.FC = () => {
       </div>
       <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div
-          className="px-4 py-8 bg-gray-800 bg-opacity-50 shadow sm:rounded-lg sm:px-10"
+          className="px-4 py-8 bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
           style={{ backdropFilter: 'blur(5px)' }}
         >
           <Transition

src/components/MovieDetails/index.tsx

@@ -146,7 +146,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
 
   return (
     <div
-      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover sm:px-8 "
+      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
       style={{
         height: 493,
         backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

src/components/RequestBlock/index.tsx

@@ -43,7 +43,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
 
   return (
     <div className="block">
-      <div className="px-4 py-4 sm:px-6">
+      <div className="px-4 py-4">
         <div className="flex items-center justify-between">
           <div className="mr-6 flex-col items-center text-sm leading-5 text-gray-300 flex-1 min-w-0">
             <div className="flex flex-nowrap mb-1 white">

src/components/RequestList/index.tsx

@@ -63,7 +63,7 @@ const RequestList: React.FC = () => {
           <tr>
             <Table.TD colSpan={6} noPadding>
               <nav
-                className="flex items-center justify-between px-4 py-3 text-white bg-gray-700 sm:px-6"
+                className="flex items-center justify-between px-4 py-3 text-white bg-gray-700"
                 aria-label="Pagination"
               >
                 <div className="hidden sm:block">

src/components/RequestModal/TvRequestModal.tsx

@@ -224,7 +224,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
     >
       <div className="flex flex-col">
         <div className="-mx-4 overflow-auto sm:mx-0 max-h-96">
-          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+          <div className="inline-block min-w-full py-2 align-middle">
             <div className="overflow-hidden shadow sm:rounded-lg">
               <table className="min-w-full">
                 <thead>
@@ -256,13 +256,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                         ></span>
                       </span>
                     </th>
-                    <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
+                    <th className="px-1 md:px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
                       {intl.formatMessage(messages.season)}
                     </th>
-                    <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
+                    <th className="px-5 md:px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
                       {intl.formatMessage(messages.numberofepisodes)}
                     </th>
-                    <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
+                    <th className="px-2 md:px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
                       {intl.formatMessage(messages.status)}
                     </th>
                   </tr>
@@ -320,17 +320,17 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                               ></span>
                             </span>
                           </td>
-                          <td className="px-6 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
+                          <td className="px-1 md:px-6 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
                             {season.seasonNumber === 0
                               ? intl.formatMessage(messages.extras)
                               : intl.formatMessage(messages.seasonnumber, {
                                   number: season.seasonNumber,
                                 })}
                           </td>
-                          <td className="px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
+                          <td className="px-5 md:px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
                             {season.episodeCount}
                           </td>
-                          <td className="px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
+                          <td className="pr-2 md:px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
                             {!seasonRequest && !mediaSeason && (
                               <Badge>
                                 {intl.formatMessage(messages.notrequested)}

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -89,10 +89,10 @@ const NotificationsDiscord: React.FC = () => {
 
         return (
           <Form>
-            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
               <label
                 htmlFor="enabled"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.agentenabled)}
               </label>
@@ -105,10 +105,10 @@ const NotificationsDiscord: React.FC = () => {
                 />
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
               <label
                 htmlFor="name"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.webhookUrl)}
               </label>

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -125,10 +125,10 @@ const NotificationsEmail: React.FC = () => {
 
         return (
           <Form>
-            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
               <label
                 htmlFor="enabled"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.agentenabled)}
               </label>
@@ -141,10 +141,10 @@ const NotificationsEmail: React.FC = () => {
                 />
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
               <label
                 htmlFor="emailFrom"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.emailsender)}
               </label>
@@ -163,10 +163,10 @@ const NotificationsEmail: React.FC = () => {
                 )}
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
               <label
                 htmlFor="senderName"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.senderName)}
               </label>
@@ -182,10 +182,10 @@ const NotificationsEmail: React.FC = () => {
                 </div>
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
               <label
                 htmlFor="smtpHost"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.smtpHost)}
               </label>
@@ -204,10 +204,10 @@ const NotificationsEmail: React.FC = () => {
                 )}
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
               <label
                 htmlFor="smtpPort"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.smtpPort)}
               </label>
@@ -226,10 +226,10 @@ const NotificationsEmail: React.FC = () => {
                 )}
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
               <label
                 htmlFor="secure"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 <div className="flex flex-col">
                   <span>{intl.formatMessage(messages.enableSsl)}</span>
@@ -247,10 +247,10 @@ const NotificationsEmail: React.FC = () => {
                 />
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
               <label
                 htmlFor="allowSelfSigned"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.allowselfsigned)}
               </label>
@@ -263,10 +263,10 @@ const NotificationsEmail: React.FC = () => {
                 />
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
               <label
                 htmlFor="authUser"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.authUser)}
               </label>
@@ -281,10 +281,10 @@ const NotificationsEmail: React.FC = () => {
                 </div>
               </div>
             </div>
-            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
               <label
                 htmlFor="authPass"
-                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
               >
                 {intl.formatMessage(messages.authPass)}
               </label>

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -117,10 +117,10 @@ const NotificationsSlack: React.FC = () => {
 
           return (
             <Form>
-              <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+              <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                 <label
                   htmlFor="isDefault"
-                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                 >
                   {intl.formatMessage(messages.agentenabled)}
                 </label>
@@ -133,10 +133,10 @@ const NotificationsSlack: React.FC = () => {
                   />
                 </div>
               </div>
-              <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+              <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                 <label
                   htmlFor="name"
-                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                 >
                   {intl.formatMessage(messages.webhookUrl)}
                 </label>

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -134,10 +134,10 @@ const NotificationsTelegram: React.FC = () => {
               })}
             </Alert>
             <Form>
-              <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+              <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                 <label
                   htmlFor="enabled"
-                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                 >
                   {intl.formatMessage(messages.agentenabled)}
                 </label>
@@ -150,10 +150,10 @@ const NotificationsTelegram: React.FC = () => {
                   />
                 </div>
               </div>
-              <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+              <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                 <label
                   htmlFor="botAPI"
-                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                 >
                   {intl.formatMessage(messages.botAPI)}
                 </label>
@@ -173,7 +173,7 @@ const NotificationsTelegram: React.FC = () => {
                 </div>
                 <label
                   htmlFor="chatId"
-                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                 >
                   {intl.formatMessage(messages.chatId)}
                 </label>

src/components/Settings/RadarrModal/index.tsx

@@ -274,10 +274,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
               }
             >
               <div className="mb-6">
-                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="isDefault"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.defaultserver)}
                   </label>
@@ -290,10 +290,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     />
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="name"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.servername)}
                   </label>
@@ -318,10 +318,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="hostname"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.hostname)}
                   </label>
@@ -347,10 +347,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="port"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.port)}
                   </label>
@@ -371,10 +371,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="ssl"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.ssl)}
                   </label>
@@ -391,10 +391,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     />
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="apiKey"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.apiKey)}
                   </label>
@@ -419,10 +419,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="baseUrl"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.baseUrl)}
                   </label>
@@ -447,10 +447,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="activeProfileId"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.qualityprofile)}
                   </label>
@@ -490,10 +490,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-8005">
                   <label
                     htmlFor="rootFolder"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.rootfolder)}
                   </label>
@@ -531,10 +531,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="minimumAvailability"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.minimumAvailability)}
                   </label>
@@ -560,10 +560,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="is4k"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.server4k)}
                   </label>

src/components/Settings/SettingsMain.tsx

@@ -159,10 +159,10 @@ const SettingsMain: React.FC = () => {
             return (
               <Form>
                 {userHasPermission(Permission.ADMIN) && (
-                  <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                  <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                     <label
                       htmlFor="username"
-                      className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                      className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                     >
                       {intl.formatMessage(messages.apikey)}
                     </label>
@@ -203,10 +203,10 @@ const SettingsMain: React.FC = () => {
                     </div>
                   </div>
                 )}
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="name"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.applicationurl)}
                   </label>

src/components/Settings/SettingsPlex.tsx

@@ -192,10 +192,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     {submitError}
                   </div>
                 )}
-                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="name"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     <FormattedMessage {...messages.servername} />
                   </label>
@@ -215,10 +215,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     </div>
                   </div>
                 </div>
-                <div className="mt-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="hostname"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     <FormattedMessage {...messages.hostname} />
                   </label>
@@ -240,10 +240,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="port"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     <FormattedMessage {...messages.port} />
                   </label>
@@ -263,10 +263,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   </div>
                 </div>
               </div>
-              <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+              <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                 <label
                   htmlFor="ssl"
-                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                 >
                   {intl.formatMessage(messages.ssl)}
                 </label>

src/components/Settings/SonarrModal/index.tsx

@@ -283,10 +283,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
               }
             >
               <div className="mb-6">
-                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="isDefault"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.defaultserver)}
                   </label>
@@ -299,10 +299,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     />
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="name"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.servername)}
                   </label>
@@ -327,10 +327,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="hostname"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.hostname)}
                   </label>
@@ -356,10 +356,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="port"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.port)}
                   </label>
@@ -380,10 +380,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="ssl"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.ssl)}
                   </label>
@@ -400,10 +400,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     />
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="apiKey"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.apiKey)}
                   </label>
@@ -428,10 +428,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="baseUrl"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.baseUrl)}
                   </label>
@@ -456,10 +456,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="activeProfileId"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.qualityprofile)}
                   </label>
@@ -499,10 +499,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="rootFolder"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.rootfolder)}
                   </label>
@@ -540,10 +540,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="activeAnimeProfileId"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.animequalityprofile)}
                   </label>
@@ -584,10 +584,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="activeAnimeRootFolder"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.animerootfolder)}
                   </label>
@@ -626,10 +626,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       )}
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="is4k"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.server4k)}
                   </label>
@@ -642,10 +642,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     />
                   </div>
                 </div>
-                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
                   <label
                     htmlFor="enableSeasonFolders"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                   >
                     {intl.formatMessage(messages.seasonfolders)}
                   </label>

src/components/Setup/index.tsx

@@ -43,7 +43,7 @@ const Setup: React.FC = () => {
   };
 
   return (
-    <div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900 sm:px-6 lg:px-8">
+    <div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900">
       <ImageFader
         backgroundImages={[
           '/images/rotate1.jpg',
@@ -57,7 +57,7 @@ const Setup: React.FC = () => {
       <div className="absolute z-50 top-4 right-4">
         <LanguagePicker />
       </div>
-      <div className="relative z-40 px-4 sm:px-2 md:px-0 sm:mx-auto sm:w-full sm:max-w-4xl">
+      <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-4xl">
         <img
           src="/logo.png"
           className="w-auto mx-auto mb-10 max-h-32"

src/components/Toast/index.tsx

@@ -3,7 +3,7 @@ import type { ToastProps } from 'react-toast-notifications';
 
 const Toast: React.FC<ToastProps> = ({ appearance, children, onDismiss }) => {
   return (
-    <div className="toast flex items-end justify-center px-2 py-2 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
+    <div className="toast flex items-end justify-center px-2 py-2 pointer-events-none sm:items-start sm:justify-end">
       <div className="max-w-sm w-full bg-gray-700 shadow-lg rounded-lg pointer-events-auto">
         <div className="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
           <div className="p-4">

src/components/TvDetails/index.tsx

@@ -166,7 +166,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
 
   return (
     <div
-      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover sm:px-8 "
+      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
       style={{
         height: 493,
         backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

src/components/UserEdit/index.tsx

@@ -155,10 +155,10 @@ const UserEdit: React.FC = () => {
 
   return (
     <>
-      <Header extraMargin={4}>
+      <Header>
         <FormattedMessage {...messages.edituser} />
       </Header>
-      <div className="px-4 space-y-6 sm:p-6 lg:pb-8">
+      <div className="space-y-6">
         <div className="flex flex-col space-y-6 text-white lg:flex-row lg:space-y-0 lg:space-x-6">
           <div className="flex-grow space-y-6">
             <div className="space-y-1">
@@ -229,7 +229,7 @@ const UserEdit: React.FC = () => {
           </div>
         </div>
         <div className="text-white">
-          <div className="sm:border-t sm:border-gray-200 sm:pt-5">
+          <div className="sm:border-t sm:border-gray-200">
             <div role="group" aria-labelledby="label-permissions">
               <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
                 <div>

src/components/UserList/index.tsx

@@ -150,7 +150,7 @@ const UserList: React.FC = () => {
         </Modal>
       </Transition>
       <div className="flex items-center justify-between">
-        <Header extraMargin={4}>{intl.formatMessage(messages.userlist)}</Header>
+        <Header>{intl.formatMessage(messages.userlist)}</Header>
         <Button
           className="mx-4 my-8"
           buttonType="primary"

tailwind.config.js

@@ -58,7 +58,7 @@ module.exports = {
     },
   },
   variants: {
-    padding: ['first', 'last'],
+    padding: ['first', 'last', 'responsive'],
     borderWidth: ['first', 'last'],
     margin: ['first', 'last', 'responsive'],
     boxShadow: ['group-focus'],