fix: improve small screen layout for discover editing (#3221)

src/components/Discover/DiscoverSliderEdit/index.tsx

@@ -183,10 +183,12 @@ const DiscoverSliderEdit = ({
           className={`absolute -bottom-2 left-0 w-full border-t-4 border-indigo-500`}
         />
       )}
-      <div className="flex w-full items-center space-x-2 rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-gray-400">
+      <div className="flex w-full flex-col rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-gray-400 md:flex-row md:items-center md:space-x-2">
+        <div className="mb-4 flex space-x-2 md:mb-0">
           <Bars3Icon className="h-6 w-6" />
           <div>{getSliderTitle(slider)}</div>
-        <div className="flex-1 pl-2">
+        </div>
+        <div className="pointer-events-none mb-4 flex-1 md:mb-0">
           {(slider.type === DiscoverSliderType.TMDB_MOVIE_KEYWORD ||
             slider.type === DiscoverSliderType.TMDB_TV_KEYWORD) && (
             <div className="flex space-x-2">
@@ -224,6 +226,7 @@ const DiscoverSliderEdit = ({
             <Tag iconSvg={<MagnifyingGlassIcon />}>{slider.data}</Tag>
           )}
         </div>
+        <div className="flex items-center space-x-2">
           {!slider.isBuiltIn && (
             <>
               {!isEditing ? (
@@ -262,7 +265,7 @@ const DiscoverSliderEdit = ({
               </Button>
             </>
           )}
-        <div className="pl-4">
+          <div className="flex-1 pl-4 text-right">
             <Tooltip content={intl.formatMessage(messages.enable)}>
               <div>
                 <SlideCheckbox
@@ -275,6 +278,7 @@ const DiscoverSliderEdit = ({
             </Tooltip>
           </div>
         </div>
+      </div>
       {isEditing ? (
         <div className="p-4">
           <CreateSlider
@@ -286,11 +290,7 @@ const DiscoverSliderEdit = ({
           />
         </div>
       ) : (
-        <div
+        <div className={`p-4 ${!slider.enabled ? 'opacity-50' : ''}`}>
-          className={`pointer-events-none p-4 ${
-            !slider.enabled ? 'opacity-50' : ''
-          }`}
-        >
           {children}
         </div>
       )}

src/components/Discover/index.tsx

@@ -119,8 +119,7 @@ const Discover = () => {
         <>
           {isEditing ? (
             <>
-              <div className="my-6 flex justify-end">
+              <div className="my-6 flex flex-col justify-end space-y-2 md:flex-row md:space-y-0 md:space-x-3">
-                <span className="ml-3 inline-flex rounded-md shadow-sm">
                 <Button
                   buttonType="default"
                   onClick={() => setIsEditing(false)}
@@ -128,21 +127,15 @@ const Discover = () => {
                   <ArrowUturnLeftIcon />
                   <span>{intl.formatMessage(messages.stopediting)}</span>
                 </Button>
-                </span>
-                <span className="ml-3 inline-flex rounded-md shadow-sm">
                 <Tooltip content={intl.formatMessage(messages.resetwarning)}>
                   <ConfirmButton
                     onClick={() => resetSliders()}
-                      confirmText={intl.formatMessage(
+                    confirmText={intl.formatMessage(globalMessages.areyousure)}
-                        globalMessages.areyousure
-                      )}
                   >
                     <ArrowPathIcon />
                     <span>{intl.formatMessage(messages.resettodefault)}</span>
                   </ConfirmButton>
                 </Tooltip>
-                </span>
-                <span className="ml-3 inline-flex rounded-md shadow-sm">
                 <Button
                   buttonType="primary"
                   type="submit"
@@ -153,10 +146,9 @@ const Discover = () => {
                   <ArrowDownOnSquareIcon />
                   <span>{intl.formatMessage(globalMessages.save)}</span>
                 </Button>
-                </span>
               </div>
               <div className="mb-6 rounded-lg bg-gray-800">
-                <div className="flex items-center space-x-2 border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-lg font-semibold text-gray-400">
+                <div className="flex items-center space-x-2 rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-lg font-semibold text-gray-400">
                   <PlusIcon className="w-6" />
                   <span data-testid="create-slider-header">
                     {intl.formatMessage(messages.createnewslider)}

src/components/MediaSlider/index.tsx

@@ -149,8 +149,8 @@ const MediaSlider = ({
       <div className="slider-header">
         {linkUrl ? (
           <Link href={linkUrl}>
-            <a className="slider-title">
+            <a className="slider-title min-w-0 pr-16">
-              <span>{title}</span>
+              <span className="truncate">{title}</span>
               <ArrowRightCircleIcon />
             </a>
           </Link>