[Enhancement] Playground Guided tour: match /tools base64 button style and right-align in row #23

New Issue

2026-04-28T22:46:25Z

spikerj commented

2026-04-28 22:46:25 +00:00

Summary

The playground Guided tour control is inconsistent with the same pattern used under /tools/(tools:base64) (and likely other tool routes): visual style of the button and horizontal placement in the row do not match.

Example

On the Base64 playground/tool surface, the guided-tour button should:

Look like the button used on /tools/(tools:base64) (same component, classes, sizing, emphasis).
Sit as the rightmost control in its toolbar/action row.

Current behavior

Button appearance does not match the /tools/:base64 treatment.
Button is positioned left of center in the row instead of farthest right, which breaks consistent UX across tools vs playground.

Expected

One shared visual language for “Guided tour” (or reuse the exact same button component / styles as tools routes).
Alignment: end of the row (e.g. justify-content / flex margin-left: auto on the wrapper, or equivalent), so it is always the rightmost option in that row.

Scope hints

Compare playground shell / Base64 integration vs src for /tools base64 route.
Identify duplicate markup or divergent wrappers causing layout drift; unify or extract a small shared fragment.

Acceptance criteria

Guided tour trigger matches /tools/(tools:base64) button look (verified side-by-side).
Trigger is consistently right-aligned in its action row on the affected playground(s), including Base64.

## Summary The **playground Guided tour** control is **inconsistent** with the same pattern used under **`/tools/(tools:base64)`** (and likely other tool routes): **visual style** of the button and **horizontal placement** in the row do not match. ## Example On the **Base64** playground/tool surface, the guided-tour button should: - **Look** like the button used on **`/tools/(tools:base64)`** (same component, classes, sizing, emphasis). - Sit as the **rightmost control** in its toolbar/action row. ## Current behavior - Button **appearance** does not match the `/tools/:base64` treatment. - Button is positioned **left of center** in the row instead of **farthest right**, which breaks **consistent UX** across tools vs playground. ## Expected - One shared visual language for “Guided tour” (or reuse the exact same button component / styles as `tools` routes). - Alignment: **end** of the row (e.g. `justify-content` / flex `margin-left: auto` on the wrapper, or equivalent), so it is always the **rightmost** option in that row. ## Scope hints - Compare playground shell / `Base64` integration vs `src` for **`/tools`** base64 route. - Identify duplicate markup or divergent wrappers causing layout drift; unify or extract a small shared fragment. ## Acceptance criteria - [ ] Guided tour trigger matches `/tools/(tools:base64)` button look (verified side-by-side). - [ ] Trigger is consistently **right-aligned** in its action row on the affected playground(s), including Base64.

guided-tour.png

35 KiB

guided-tour-btn.png

5.0 KiB

spikerj commented

2026-05-07 14:05:45 +00:00

Closing — already implemented

Verified all playground surfaces against the canonical /tools/(tools:base64) button. Both acceptance items are met. Closing as done.

Acceptance checklist

Visual match with /tools/(tools:base64) — every styled property on the playground .guided-tour-button is a 1:1 copy of base64's .tour-button:

Property	base64 (`.tour-button`)	playground (`.guided-tour-button`)
element	`mat-stroked-button`	`mat-stroked-button`
`display`	`inline-flex`	`inline-flex`
`align-items`	`center`	`center`
`gap`	`4px`	`4px`
`font-size`	`0.82rem`	`0.82rem`
`color`	`var(--color-primary)`	`var(--color-primary)`
`border-color`	`var(--border-secondary)`	`var(--border-secondary)`
icon size	18×18	18×18
label	"Guided Tour"	"Guided Tour"
leading icon	`help_outline`	`help_outline`

Right-aligned in the action row — the playground's flex header uses order: 999 + margin-left: auto on the button, which pushes it to the rightmost slot without reordering the DOM (so guided-tour step anchors aren't scrambled). The regex playground achieves the same effect via a .menu-bar-spacer { flex: 1 } element placed before the tour button.

Locations confirmed

libraries/tools/src/components/csharp-runner/csharp-runner.scss — .guided-tour-button block (lines 237–256). The block has an in-source comment explicitly referencing Gitea spikersoft-issues#23 as the ticket this fix addresses.
libraries/tools/src/components/language-runner/language-runner.html (lines 69–81) — reuses csharp-runner.scss via styleUrl, so C# / JS / Python / TS playgrounds all inherit the same treatment.
libraries/tools/src/components/reg-ex/reg-ex.component.scss (lines 85–107) — regex playground with the matching .guided-tour-button block + a .menu-bar-spacer { flex: 1 } for right-alignment.
libraries/tools/src/components/encoding-decoding/base64/base64.component.scss (lines 52–65) — canonical reference.
libraries/tools/src/components/encoding-decoding/jwt/jwt.component.html — also uses the canonical .tour-button class for consistency on the JWT tool.

Result

One shared visual language for "Guided Tour" across every playground (csharp-runner, language-runner host for JS / Python / TS, regex) AND every standalone tool (base64, jwt). The trigger is consistently the rightmost control in its action row on every affected surface.

## Closing — already implemented Verified all playground surfaces against the canonical `/tools/(tools:base64)` button. Both acceptance items are met. Closing as **done**. ### Acceptance checklist - [x] **Visual match with `/tools/(tools:base64)`** — every styled property on the playground `.guided-tour-button` is a 1:1 copy of base64's `.tour-button`: | Property | base64 (`.tour-button`) | playground (`.guided-tour-button`) | | --------------------- | ----------------------- | ---------------------------------- | | element | `mat-stroked-button` | `mat-stroked-button` | | `display` | `inline-flex` | `inline-flex` | | `align-items` | `center` | `center` | | `gap` | `4px` | `4px` | | `font-size` | `0.82rem` | `0.82rem` | | `color` | `var(--color-primary)` | `var(--color-primary)` | | `border-color` | `var(--border-secondary)` | `var(--border-secondary)` | | icon size | 18×18 | 18×18 | | label | "Guided Tour" | "Guided Tour" | | leading icon | `help_outline` | `help_outline` | - [x] **Right-aligned in the action row** — the playground's flex header uses `order: 999` + `margin-left: auto` on the button, which pushes it to the rightmost slot without reordering the DOM (so guided-tour step anchors aren't scrambled). The regex playground achieves the same effect via a `.menu-bar-spacer { flex: 1 }` element placed before the tour button. ### Locations confirmed - `libraries/tools/src/components/csharp-runner/csharp-runner.scss` — `.guided-tour-button` block (lines 237–256). The block has an in-source comment explicitly referencing **`Gitea spikersoft-issues#23`** as the ticket this fix addresses. - `libraries/tools/src/components/language-runner/language-runner.html` (lines 69–81) — reuses `csharp-runner.scss` via `styleUrl`, so C# / JS / Python / TS playgrounds all inherit the same treatment. - `libraries/tools/src/components/reg-ex/reg-ex.component.scss` (lines 85–107) — regex playground with the matching `.guided-tour-button` block + a `.menu-bar-spacer { flex: 1 }` for right-alignment. - `libraries/tools/src/components/encoding-decoding/base64/base64.component.scss` (lines 52–65) — canonical reference. - `libraries/tools/src/components/encoding-decoding/jwt/jwt.component.html` — also uses the canonical `.tour-button` class for consistency on the JWT tool. ### Result One shared visual language for **"Guided Tour"** across every playground (csharp-runner, language-runner host for JS / Python / TS, regex) AND every standalone tool (base64, jwt). The trigger is consistently the **rightmost** control in its action row on every affected surface.

spikerj closed this issue

2026-05-07 14:05:58 +00:00

spikerj referenced this issue

2026-06-08 20:59:03 +00:00

Problem with the header when translating with Google Translate #159

spikerj referenced this issue

2026-06-27 03:28:24 +00:00

[Bug] Twilio SMS config-key mismatch — handlers read Twilio:PhoneNumber, but appsettings + deploy docs use Twilio:FromNumber (dead MessagingServiceSid) #264

Sign in to join this conversation.