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">
-        <Bars3Icon className="h-6 w-6" />
-        <div>{getSliderTitle(slider)}</div>
-        <div className="flex-1 pl-2">
+      <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>
+        <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,55 +226,57 @@ const DiscoverSliderEdit = ({
             <Tag iconSvg={<MagnifyingGlassIcon />}>{slider.data}</Tag>
           )}
         </div>
-        {!slider.isBuiltIn && (
-          <>
-            {!isEditing ? (
+        <div className="flex items-center space-x-2">
+          {!slider.isBuiltIn && (
+            <>
+              {!isEditing ? (
+                <Button
+                  buttonType="warning"
+                  buttonSize="sm"
+                  onClick={() => {
+                    setIsEditing(true);
+                  }}
+                >
+                  <PencilIcon />
+                  <span>{intl.formatMessage(globalMessages.edit)}</span>
+                </Button>
+              ) : (
+                <Button
+                  buttonType="default"
+                  buttonSize="sm"
+                  onClick={() => {
+                    setIsEditing(false);
+                  }}
+                >
+                  <ArrowUturnLeftIcon />
+                  <span>{intl.formatMessage(globalMessages.cancel)}</span>
+                </Button>
+              )}
               <Button
-                buttonType="warning"
+                data-testid="discover-slider-remove-button"
+                buttonType="danger"
                 buttonSize="sm"
                 onClick={() => {
-                  setIsEditing(true);
+                  deleteSlider();
                 }}
               >
-                <PencilIcon />
-                <span>{intl.formatMessage(globalMessages.edit)}</span>
+                <XMarkIcon />
+                <span>{intl.formatMessage(messages.remove)}</span>
               </Button>
-            ) : (
-              <Button
-                buttonType="default"
-                buttonSize="sm"
-                onClick={() => {
-                  setIsEditing(false);
-                }}
-              >
-                <ArrowUturnLeftIcon />
-                <span>{intl.formatMessage(globalMessages.cancel)}</span>
-              </Button>
-            )}
-            <Button
-              data-testid="discover-slider-remove-button"
-              buttonType="danger"
-              buttonSize="sm"
-              onClick={() => {
-                deleteSlider();
-              }}
-            >
-              <XMarkIcon />
-              <span>{intl.formatMessage(messages.remove)}</span>
-            </Button>
-          </>
-        )}
-        <div className="pl-4">
-          <Tooltip content={intl.formatMessage(messages.enable)}>
-            <div>
-              <SlideCheckbox
-                onClick={() => {
-                  onEnable();
-                }}
-                checked={slider.enabled}
-              />
-            </div>
-          </Tooltip>
+            </>
+          )}
+          <div className="flex-1 pl-4 text-right">
+            <Tooltip content={intl.formatMessage(messages.enable)}>
+              <div>
+                <SlideCheckbox
+                  onClick={() => {
+                    onEnable();
+                  }}
+                  checked={slider.enabled}
+                />
+              </div>
+            </Tooltip>
+          </div>
         </div>
       </div>
       {isEditing ? (
@@ -286,11 +290,7 @@ const DiscoverSliderEdit = ({
           />
         </div>
       ) : (
-        <div
-          className={`pointer-events-none p-4 ${
-            !slider.enabled ? 'opacity-50' : ''
-          }`}
-        >
+        <div className={`p-4 ${!slider.enabled ? 'opacity-50' : ''}`}>
           {children}
         </div>
       )}

src/components/Discover/index.tsx

@@ -119,44 +119,36 @@ const Discover = () => {
         <>
           {isEditing ? (
             <>
-              <div className="my-6 flex justify-end">
-                <span className="ml-3 inline-flex rounded-md shadow-sm">
-                  <Button
-                    buttonType="default"
-                    onClick={() => setIsEditing(false)}
+              <div className="my-6 flex flex-col justify-end space-y-2 md:flex-row md:space-y-0 md:space-x-3">
+                <Button
+                  buttonType="default"
+                  onClick={() => setIsEditing(false)}
+                >
+                  <ArrowUturnLeftIcon />
+                  <span>{intl.formatMessage(messages.stopediting)}</span>
+                </Button>
+                <Tooltip content={intl.formatMessage(messages.resetwarning)}>
+                  <ConfirmButton
+                    onClick={() => resetSliders()}
+                    confirmText={intl.formatMessage(globalMessages.areyousure)}
                   >
-                    <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(
-                        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"
-                    disabled={!hasChanged()}
-                    onClick={() => updateSliders()}
-                    data-testid="discover-customize-submit"
-                  >
-                    <ArrowDownOnSquareIcon />
-                    <span>{intl.formatMessage(globalMessages.save)}</span>
-                  </Button>
-                </span>
+                    <ArrowPathIcon />
+                    <span>{intl.formatMessage(messages.resettodefault)}</span>
+                  </ConfirmButton>
+                </Tooltip>
+                <Button
+                  buttonType="primary"
+                  type="submit"
+                  disabled={!hasChanged()}
+                  onClick={() => updateSliders()}
+                  data-testid="discover-customize-submit"
+                >
+                  <ArrowDownOnSquareIcon />
+                  <span>{intl.formatMessage(globalMessages.save)}</span>
+                </Button>
               </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">
-              <span>{title}</span>
+            <a className="slider-title min-w-0 pr-16">
+              <span className="truncate">{title}</span>
               <ArrowRightCircleIcon />
             </a>
           </Link>