Improve UI for navigation

src/components/TopicDetail/TopicDetail.tsx

@@ -396,52 +396,40 @@ export function TopicDetail(props: TopicDetailProps) {
                 'flex flex-col': activeTab === 'ai',
               })}
             >
-              <div
-                className={cn(
-                  '-mt-4 mb-2 flex items-center justify-between py-1.5',
-                )}
-              >
-                <div>
-                  <a
-                    href={contributionUrl}
-                    target={'_blank'}
-                    className="flex w-full items-center justify-center rounded-md px-2 py-1 text-sm text-xs text-black transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
-                  >
-                    <GitHubIcon className="mr-1.5 inline-block size-[12px] text-current" />
-                    Edit this content
-                  </a>
-                </div>
-                <button
-                  type="button"
-                  id="close-topic"
-                  className="flex items-center gap-2 rounded-lg bg-transparent px-1.5 py-1 text-xs tracking-wider text-gray-400 uppercase hover:bg-gray-200 hover:text-gray-900"
-                  onClick={handleClose}
-                >
-                  <X className="size-4" />
-                </button>
-              </div>
-
               <div className="flex items-center justify-between">
-                <div>
+                {shouldShowAiTab && (
-                  {shouldShowAiTab && (
+                  <TopicDetailsTabs
-                    <TopicDetailsTabs
+                    activeTab={activeTab}
-                      activeTab={activeTab}
+                    setActiveTab={setActiveTab}
-                      setActiveTab={setActiveTab}
-                    />
-                  )}
-                </div>
-                {!isEmbed && (
-                  <TopicProgressButton
-                    topicId={
-                      topicId.indexOf('@') !== -1
-                        ? topicId.split('@')[1]
-                        : topicId
-                    }
-                    resourceId={resourceId}
-                    resourceType={resourceType}
-                    onClose={handleClose}
                   />
                 )}
+                <div
+                  className={cn('flex flex-grow justify-end gap-1', {
+                    'justify-between': !shouldShowAiTab,
+                  })}
+                >
+                  {!isEmbed && (
+                    <TopicProgressButton
+                      topicId={
+                        topicId.indexOf('@') !== -1
+                          ? topicId.split('@')[1]
+                          : topicId
+                      }
+                      dropdownClassName={!shouldShowAiTab ? 'left-0' : 'right-0'}
+                      resourceId={resourceId}
+                      resourceType={resourceType}
+                      onClose={handleClose}
+                    />
+                  )}
+                  <button
+                    type="button"
+                    id="close-topic"
+                    className="flex items-center gap-1.5 rounded-lg bg-gray-200 px-1.5 py-1 text-xs text-black hover:bg-gray-300 hover:text-gray-900"
+                    onClick={handleClose}
+                  >
+                    <X className="size-4" />
+                  </button>
+                </div>
               </div>
 
               {activeTab === 'ai' && shouldShowAiTab && (

src/components/TopicDetail/TopicDetailsTabs.tsx

@@ -11,7 +11,7 @@ export function TopicDetailsTabs(props: TopicDetailsTabsProps) {
   const { activeTab, setActiveTab } = props;
 
   return (
-    <div className="flex w-max items-center gap-1.5 p-0.5">
+    <div className="flex w-max gap-1.5">
       <TopicDetailsTab
         isActive={activeTab === 'content'}
         icon={Earth}
@@ -42,7 +42,7 @@ function TopicDetailsTab(props: TopicDetailsTabProps) {
 
   return (
     <button
-      className="flex hover:bg-gray-100 items-center gap-2 px-2 py-1 rounded-lg text-sm text-gray-500 data-[state=active]:bg-black data-[state=active]:text-white"
+      className="flex border data-[state=active]:border-black border-gray-300 hover:bg-gray-100 items-center gap-2 px-2 py-1 rounded-md text-sm text-gray-500 data-[state=active]:bg-black data-[state=active]:text-white"
       data-state={isActive ? 'active' : 'inactive'}
       onClick={onClick}
       disabled={isActive}

src/components/TopicDetail/TopicProgressButton.tsx

@@ -16,6 +16,7 @@ import { showLoginPopup } from '../../lib/popup';
 import { useToast } from '../../hooks/use-toast';
 import { Spinner } from '../ReactIcons/Spinner';
 import { ChevronDown } from 'lucide-react';
+import { cn } from '../../lib/classname';
 
 const statusColors: Record<ResourceProgressType, string> = {
   done: 'bg-green-500',
@@ -29,6 +30,7 @@ type TopicProgressButtonProps = {
   topicId: string;
   resourceId: string;
   resourceType: ResourceType;
+  dropdownClassName?: string;
 
   onClose: () => void;
 };
@@ -60,7 +62,8 @@ function ProgressDropdownItem(props: ProgressDropdownItemProps) {
 }
 
 export function TopicProgressButton(props: TopicProgressButtonProps) {
-  const { topicId, resourceId, resourceType, onClose } = props;
+  const { topicId, resourceId, resourceType, onClose, dropdownClassName } =
+    props;
 
   const toast = useToast();
   const [isUpdatingProgress, setIsUpdatingProgress] = useState(true);
@@ -234,7 +237,9 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
   return (
     <div className="relative inline-flex">
       <button
-        className="inline-flex cursor-default cursor-pointer items-center rounded-md border border-gray-300 p-1 px-2 text-sm text-black hover:bg-gray-100"
+        className={cn(
+          'flex cursor-default cursor-pointer items-center rounded-md border border-gray-300 p-1 px-2 text-sm text-black hover:border-gray-400',
+        )}
         onClick={() => setShowChangeStatus(true)}
       >
         <span className="flex h-2 w-2">
@@ -250,7 +255,10 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
 
       {showChangeStatus && (
         <div
-          className="absolute bg-white z-50 top-full right-0 mt-1 flex min-w-[160px] flex-col divide-y rounded-md border border-gray-200 bg-white shadow-md [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md"
+          className={cn(
+            'absolute top-full right-0 z-50 mt-1 flex min-w-[160px] flex-col divide-y rounded-md border border-gray-200 bg-white shadow-md [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md',
+            dropdownClassName,
+          )}
           ref={changeStatusRef!}
         >
           {allowMarkingDone && (