Refac delete buttons order to be in a row

frontend/src/pages/ChannelAbout.tsx

@@ -152,8 +152,9 @@ const ChannelAbout = () => {
                     )}
 
                     {showDeleteConfirm && (
-                      <div className="delete-confirm" id="delete-button">
+                      <div className="delete-confirm">
                         <span>Delete {channel.channel_name} including all videos? </span>
+
                         <Button
                           label="Delete"
                           className="danger-button"
@@ -161,7 +162,8 @@ const ChannelAbout = () => {
                             await deleteChannel(channelId);
                             navigate(Routes.Channels);
                           }}
-                        />{' '}
+                        />
+
                         <Button
                           label="Cancel"
                           onClick={() => setShowDeleteConfirm(!showDeleteConfirm)}

frontend/src/pages/Channels.tsx

@@ -68,6 +68,7 @@ const Channels = () => {
         currentPage,
         userConfig.config.show_subed_only,
       );
+
       setChannelListResponse(channelListResponse);
     })();
   }, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]);
@@ -92,10 +93,12 @@ const Channels = () => {
                 alt="add-icon"
                 title="Subscribe to Channels"
               />
+
               {showAddForm && (
                 <div className="show-form">
                   <div>
                     <label>Subscribe to channels:</label>
+
                     <textarea
                       value={channelsToSubscribeTo}
                       onChange={e => {

frontend/src/pages/Playlist.tsx

@@ -206,7 +206,7 @@ const Playlist = () => {
               )}
 
               {showDeleteConfirm && (
-                <div className="delete-confirm" id="delete-button">
+                <div className="delete-confirm">
                   <span>Delete {playlist.playlist_name}?</span>
 
                   <Button
@@ -226,7 +226,6 @@ const Playlist = () => {
                     }}
                   />
 
-                  <br />
                   <Button label="Cancel" onClick={() => setShowDeleteConfirm(!showDeleteConfirm)} />
                 </div>
               )}

frontend/src/pages/Video.tsx

@@ -349,8 +349,9 @@ const Video = () => {
                   )}
 
                   {showDeleteConfirm && (
-                    <div className="delete-confirm" id="delete-button">
+                    <div className="delete-confirm">
                       <span>Are you sure? </span>
+
                       <Button
                         label="Delete"
                         className="danger-button"
@@ -358,7 +359,8 @@ const Video = () => {
                           await deleteVideo(videoId);
                           navigate(Routes.Channel(video.channel.channel_id));
                         }}
-                      />{' '}
+                      />
+
                       <Button
                         label="Cancel"
                         onClick={() => setShowDeleteConfirm(!showDeleteConfirm)}

frontend/src/style.css

@@ -268,6 +268,7 @@ button:hover {
 
 /* delete button */
 .delete-confirm button {
+  display: flex;
   margin: 3px 0;
 }