fix: document issues (#6069)

frontend/appflowy_web_app/src/components/as-template/AsTemplate.tsx

@@ -13,7 +13,6 @@ import { useTranslation } from 'react-i18next';
 import { ReactComponent as CloseIcon } from '@/assets/close.svg';
 import { ReactComponent as DeleteIcon } from '@/assets/trash.svg';
 import './template.scss';
-import { useNavigate } from 'react-router-dom';
 
 function AsTemplate ({
   viewName,
@@ -37,7 +36,9 @@ function AsTemplate ({
     loading,
   } = useLoadTemplate(viewId);
 
-  const navigate = useNavigate();
+  const handleBack = useCallback(() => {
+    window.location.href = `${decodeURIComponent(viewUrl)}`;
+  }, [viewUrl]);
   const handleSubmit = useCallback(async (data: AsTemplateFormValue) => {
     if (!service || !selectedCreatorId || selectedCategoryIds.length === 0) return;
     const formData: UploadTemplatePayload = {
@@ -50,8 +51,6 @@ function AsTemplate ({
       view_url: viewUrl,
     };
 
-    console.log('formData', formData);
-
     try {
       if (template) {
         await service?.updateTemplate(template.view_id, formData);
@@ -71,14 +70,14 @@ function AsTemplate ({
           window.open(`${url}/template-center/${selectedCategoryIds[0]}/${viewId}`, '_blank');
         },
       });
-      navigate(-1);
+      handleBack();
     } catch (error) {
       // eslint-disable-next-line
       // @ts-ignore
       notify.error(error.toString());
     }
 
-  }, [service, selectedCreatorId, selectedCategoryIds, viewId, isNewTemplate, isFeatured, viewUrl, template, t, navigate, loadTemplate]);
+  }, [service, selectedCreatorId, selectedCategoryIds, viewId, isNewTemplate, isFeatured, viewUrl, template, t, handleBack, loadTemplate]);
 
   const submitRef = React.useRef<HTMLInputElement>(null);
 
@@ -114,9 +113,7 @@ function AsTemplate ({
     <div className={'flex flex-col gap-4 w-full h-full overflow-hidden'}>
       <div className={'flex items-center justify-between'}>
         <Button
-          onClick={() => {
+          onClick={handleBack}
-            navigate(-1);
-          }}
           variant={'outlined'}
           color={'inherit'}
           endIcon={<CloseIcon className={'w-4 h-4'} />}
@@ -179,9 +176,12 @@ function AsTemplate ({
           </div>
         </div>
       </div>
-      {deleteModalOpen && <DeleteTemplate id={viewId} onDeleted={() => {
+      {deleteModalOpen &&
-        navigate(-1);
+        <DeleteTemplate
-      }} open={deleteModalOpen} onClose={() => setDeleteModalOpen(false)}
+          id={viewId}
+          onDeleted={handleBack}
+          open={deleteModalOpen}
+          onClose={() => setDeleteModalOpen(false)}
         />}
     </div>
 

frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx

@@ -76,12 +76,17 @@ export const DatabaseTabs = forwardRef<HTMLDivElement, DatabaseTabBarProps>(
 
     const showActions = !hideConditions && layout !== DatabaseViewLayout.Calendar;
 
-    const getSelectedTabWidth = useCallback(() => {
+    const getSelectedTabIndicatorProps = useCallback(() => {
       const selectedTab = document.getElementById(`view-tab-${selectedViewId}`);
 
       if (!selectedTab) return;
 
-      return selectedTab.clientWidth;
+      return {
+        style: {
+          width: selectedTab.clientWidth,
+          left: selectedTab.offsetLeft,
+        },
+      };
     }, [selectedViewId]);
 
     if (viewIds.length === 0) return null;
@@ -99,11 +104,7 @@ export const DatabaseTabs = forwardRef<HTMLDivElement, DatabaseTabBarProps>(
             allowScrollButtonsMobile
             value={selectedViewId}
             onChange={handleChange}
-            TabIndicatorProps={{
+            TabIndicatorProps={getSelectedTabIndicatorProps()}
-              style: {
-                width: getSelectedTabWidth(),
-              },
-            }}
           >
             {viewIds.map((viewId) => {
               const view = views?.get(viewId) as YDatabaseView | null;

frontend/appflowy_web_app/src/components/publish/CollabView.tsx

@@ -41,13 +41,28 @@ function CollabView ({ doc }: CollabViewProps) {
   const loadView = usePublishContext()?.loadView;
   const isTemplateThumb = usePublishContext()?.isTemplateThumb;
 
+  const className = useMemo(() => {
+    const classList = ['relative w-full flex-1'];
+
+    if (isTemplateThumb && layout !== ViewLayout.Document) {
+      classList.push('flex justify-center h-full');
+    }
+
+    if (layoutClassName) {
+      classList.push(layoutClassName);
+    }
+
+    return classList.join(' ');
+  }, [isTemplateThumb, layout, layoutClassName]);
+
   if (!doc || !View) {
     return <ComponentLoading />;
   }
 
   return (
-    <div style={style}
+    <div
-         className={`relative w-full ${isTemplateThumb ? 'flex justify-center h-full' : 'flex-1'}  ${layoutClassName}`}
+      style={style}
+      className={className}
     >
       <View
         doc={doc}