fix(giveback): tab-nav alignment + deferred polish + analytics gap

packages/shared/src/features/giveback/components/GivebackCauseCard.tsx

@@ -12,6 +12,8 @@ import { OpenLinkIcon, PlusIcon, VIcon } from '../../../components/icons';
 import { IconSize } from '../../../components/Icon';
 import { CauseEmblem } from './CauseEmblem';
 import { anchorDefaultRel } from '../../../lib/strings';
+import { useLogContext } from '../../../contexts/LogContext';
+import { LogEvent } from '../../../lib/log';
 import type { ContributionCause } from '../types';
 
 interface GivebackCauseCardProps {
@@ -33,6 +35,7 @@ export const GivebackCauseCard = ({
   onToggle,
   buttonToggle = false,
 }: GivebackCauseCardProps): ReactElement => {
+  const { logEvent } = useLogContext();
   const toggle = () => onToggle(cause.id);
   const cardClickable = !buttonToggle;
 
@@ -131,7 +134,13 @@ export const GivebackCauseCard = ({
           href={cause.url}
           target="_blank"
           rel={anchorDefaultRel}
-          onClick={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation();
+            logEvent({
+              event_name: LogEvent.ClickGivebackCause,
+              target_id: cause.id,
+            });
+          }}
           className="group/learn relative z-1 inline-flex w-fit items-center gap-1 font-bold text-text-link underline-offset-2 typo-footnote hover:underline focus-visible:underline"
         >
           Learn more

packages/shared/src/features/giveback/components/GivebackTabNav.spec.tsx

@@ -6,7 +6,7 @@ it('renders the tabs from the shared tab list', () => {
   render(<GivebackTabNav activeTab="actions" onSelect={jest.fn()} />);
 
   expect(screen.getByText('Take action')).toBeInTheDocument();
-  expect(screen.getByText('Impact')).toBeInTheDocument();
+  expect(screen.getByText('Your impact')).toBeInTheDocument();
   expect(screen.getByText('Causes')).toBeInTheDocument();
   expect(screen.getByText('FAQ')).toBeInTheDocument();
 });

packages/shared/src/features/giveback/components/GivebackTabNav.tsx

@@ -11,7 +11,7 @@ interface GivebackTab {
 
 export const givebackTabs: GivebackTab[] = [
   { id: 'actions', label: 'Take action' },
-  { id: 'impact', label: 'Impact' },
+  { id: 'impact', label: 'Your impact' },
   { id: 'causes', label: 'Causes' },
   { id: 'faq', label: 'FAQ' },
 ];
@@ -39,8 +39,9 @@ export const GivebackTabNav = ({
         className="via-accent-cabbage-default/40 pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent to-transparent"
       />
       {/* Scrollable on narrow screens so every tab stays reachable instead of
-          overflowing or wrapping. */}
-      <div className="no-scrollbar mx-auto flex w-full max-w-6xl items-center overflow-x-auto px-4">
+          overflowing or wrapping. Gutter matches the page column so the tabs
+          line up with the content below on every breakpoint. */}
+      <div className="no-scrollbar mx-auto flex w-full max-w-6xl items-center overflow-x-auto px-4 tablet:px-8 laptop:px-12">
         <TabList
           items={givebackTabs.map((tab) => ({ label: tab.label }))}
           active={activeLabel}

packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.spec.tsx

@@ -105,7 +105,9 @@ it('saves the current selection and toasts', async () => {
   await waitFor(() =>
     expect(saveCausePreferences).toHaveBeenCalledWith(['c1']),
   );
-  expect(displayToast).toHaveBeenCalledWith('Your causes are saved');
+  expect(displayToast).toHaveBeenCalledWith('Your causes are saved', {
+    timer: 3000,
+  });
   expect(saved).toBe(true);
 });
 

packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.ts

@@ -92,7 +92,9 @@ export const useGivebackCauseSelection = (
   const save = useCallback(async () => {
     try {
       await saveCausePreferences([...selectedIds]);
-      displayToast('Your causes are saved');
+      // Auto-dismisses for users who keep notifications on auto-dismiss (the
+      // default); others have explicitly chosen to dismiss toasts themselves.
+      displayToast('Your causes are saved', { timer: 3000 });
       return true;
     } catch {
       displayToast(labels.error.generic);

packages/webapp/pages/giveback/index.tsx

@@ -21,7 +21,7 @@ const seo: NextSeoProps = {
   },
   ...defaultSeo,
   description:
-    'Help daily.dev grow and we will fund good causes. Complete community actions to help unlock donations toward a shared goal.',
+    'daily.dev would rather fund real-world causes than pay for ads. Take small actions to help us grow, and we turn that budget into donations to the causes you choose, at no cost to you.',
   nofollow: true,
   noindex: true,
 };