refactor: clean up styles and improve button layout

- Remove unused CSS styles
- Change button width to fit-content
- Use Tailwind class for inline-block
- Adjust button padding

src/content/components/CopyTranscriptButton.tsx

@@ -1,10 +1,26 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { getTranscript } from '../utils/transcript';
 
 export const CopyTranscriptButton: React.FC = () => {
   const [status, setStatus] = useState<
     'idle' | 'copying' | 'success' | 'error'
   >('idle');
+  const [isLecturePage, setIsLecturePage] = useState(false);
+
+  useEffect(() => {
+    const checkIfLecturePage = () => {
+      const url = window.location.href;
+      const learnMatch = url.match(/\/learn\/.*?\/lecture\//);
+      setIsLecturePage(!!learnMatch);
+    };
+
+    checkIfLecturePage();
+  }, []);
+
+  // Don't render the button if we're not on a lecture page
+  if (!isLecturePage) {
+    return null;
+  }
 
   const handleCopy = async () => {
     try {
@@ -48,7 +64,8 @@ export const CopyTranscriptButton: React.FC = () => {
 
   return (
     <button
-      className={`inline-flex items-center justify-center min-h-[48px] min-w-[44px] w-[140px] font-[var(--cds-font-weight-600)] text-sm px-3 py-3 mb-1 mr-6 transition-colors duration-200 ease-in-out outline-none focus:outline-none
+      id="coursera-copilot-button"
+      className={`rounded-md inline-flex items-center justify-center min-h-[48px] min-w-[44px] w-fit font-[var(--cds-font-weight-600)] text-sm px-2 py-3 mb-1 mr-6 transition-colors duration-200 ease-in-out outline-none focus:outline-none
       ${status === 'idle' ? 'bg-transparent text-[var(--cds-color-neutral-primary)] hover:text-[var(--cds-color-interactive-primary-hover)] hover:bg-[var(--cds-color-interactive-background-primary-hover-weak)]' : ''}
       ${status === 'copying' ? 'bg-transparent text-[var(--cds-color-neutral-disabled)] cursor-not-allowed' : ''}
       ${status === 'success' ? 'bg-transparent text-[var(--cds-color-feedback-success)]' : ''}

src/content/index.tsx

@@ -42,19 +42,22 @@ const init = async () => {
   console.log('[Coursera Copilot] Initializing extension...');
 
   // Check if button already exists
-  const existingContainer = document.getElementById('coursera-copilot-container');
-  if (existingContainer) {
-    console.log('[Coursera Copilot] Button already exists, skipping initialization');
+  const existingButton = document.getElementById('coursera-copilot-button');
+  if (existingButton) {
+    console.log(
+      '[Coursera Copilot] Button already exists, skipping initialization'
+    );
     return;
   }
 
   const tablist = await findElement(TABLIST_SELECTORS);
 
   if (tablist) {
     console.log('[Coursera Copilot] Found tablist, injecting button...');
+
+    // Create a container but keep it minimal
     const container = document.createElement('div');
-    container.id = 'coursera-copilot-container';
-    // Insert at the beginning of the tablist
+    container.className = 'inline-block'; // Keep it inline with other elements
     tablist.appendChild(container);
 
     const root = createRoot(container);

src/content/styles.css

@@ -1,37 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* #coursera-copilot-container {
-  display: inline-block;
-  margin-right: 16px;
-}
-
-.copy-transcript-button {
-  background-color: #0056d2;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 600;
-  transition: background-color 0.2s;
-}
-
-.copy-transcript-button:hover {
-  background-color: #003e9c;
-}
-
-.copy-transcript-button:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
-.copy-transcript-button.success {
-  background-color: #2e7d32;
-}
-
-.copy-transcript-button.error {
-  background-color: #d32f2f;
-} */