fix(projects): tags should be aligned on the right

Author: not-matthias

content/projects/project_no_links.md

@@ -0,0 +1,12 @@
++++
+title = "Example Project Without Links"
+description = "A project that only has tags but no demo or github link"
+weight = 100
+date = 2024-10-25
+
+[extra]
+remote_image = "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
+tags = ["example", "test", "layout"]
++++
+
+This project demonstrates a layout issue where tags should be aligned to the right even when there are no demo or github links.

sass/parts/_cards.scss

@@ -79,6 +79,7 @@
     align-items: center;
     gap: 12px;
     margin-top: auto;
+    flex-wrap: wrap;
   }
 
   &-links {
@@ -93,6 +94,7 @@
     gap: 4px;
     justify-content: flex-end;
     align-items: center;
+    margin-left: auto;
   }
 
   &-tag {

tests/content/tag-alignment.spec.ts

@@ -0,0 +1,90 @@
+import { test, expect } from '@playwright/test';
+import { TestHelpers } from '../helpers';
+
+test.describe('Tag Alignment in Project Cards', () => {
+  let helpers: TestHelpers;
+
+  test.beforeEach(async ({ page }) => {
+    helpers = new TestHelpers(page);
+    await page.goto('/projects');
+    await helpers.waitForPageReady();
+  });
+
+  test('tags should be aligned to the right when there are no github/demo links', async ({ page }) => {
+    // Find the card for "Example Project Without Links"
+    const projectCard = page.locator('.card', { has: page.locator('h1:has-text("Example Project Without Links")') });
+
+    // Verify the card exists
+    await expect(projectCard).toBeVisible();
+
+    // Get the card footer
+    const cardFooter = projectCard.locator('.card-footer');
+    await expect(cardFooter).toBeVisible();
+
+    // Verify there are no card links (github/demo buttons)
+    const cardLinks = cardFooter.locator('.card-links');
+    await expect(cardLinks).not.toBeVisible();
+
+    // Verify there are tags
+    const cardTags = cardFooter.locator('.card-tags');
+    await expect(cardTags).toBeVisible();
+
+    const tags = cardTags.locator('.card-tag');
+    const tagCount = await tags.count();
+    expect(tagCount).toBeGreaterThan(0);
+
+    // Get the bounding boxes
+    const footerBox = await cardFooter.boundingBox();
+    const tagsBox = await cardTags.boundingBox();
+
+    expect(footerBox).toBeTruthy();
+    expect(tagsBox).toBeTruthy();
+
+    if (footerBox && tagsBox) {
+      // Tags should be aligned to the right (right edge should be close to footer's right edge)
+      const footerRight = footerBox.x + footerBox.width;
+      const tagsRight = tagsBox.x + tagsBox.width;
+
+      // Allow a small margin for padding (20px is the card padding)
+      const rightMargin = footerBox.width * 0.1; // 10% tolerance
+      expect(tagsRight).toBeGreaterThan(footerRight - rightMargin);
+    }
+  });
+
+  test('tags should still be aligned to the right when github/demo links are present', async ({ page }) => {
+    // Find a card that has both links and tags (e.g., "Apollo" project)
+    const projectCard = page.locator('.card', { has: page.locator('h1:has-text("Apollo")') });
+
+    // Verify the card exists
+    await expect(projectCard).toBeVisible();
+
+    // Get the card footer
+    const cardFooter = projectCard.locator('.card-footer');
+    await expect(cardFooter).toBeVisible();
+
+    // Verify there are card links
+    const cardLinks = cardFooter.locator('.card-links');
+    await expect(cardLinks).toBeVisible();
+
+    // Verify there are tags
+    const cardTags = cardFooter.locator('.card-tags');
+    await expect(cardTags).toBeVisible();
+
+    // Get the bounding boxes
+    const footerBox = await cardFooter.boundingBox();
+    const tagsBox = await cardTags.boundingBox();
+
+    expect(footerBox).toBeTruthy();
+    expect(tagsBox).toBeTruthy();
+
+    if (footerBox && tagsBox) {
+      // Tags should be aligned to the right (right edge should be close to footer's right edge)
+      const footerRight = footerBox.x + footerBox.width;
+      const tagsRight = tagsBox.x + tagsBox.width;
+
+      // Allow a small margin for padding
+      const rightMargin = footerBox.width * 0.1; // 10% tolerance
+      expect(tagsRight).toBeGreaterThan(footerRight - rightMargin);
+    }
+  });
+});