Chore/UI rework

[Sithumli]

This pull request introduces a UI update to the DocuBase website, focusing on improving visual consistency, accessibility, and maintainability. The changes include significant refactoring of component styles, updates to icon handling, adjustments to prose and table styling, and minor component and content tweaks. The most important changes are grouped below:

Component and Icon Handling Improvements:

• Removed redundant <script> import 'iconify-icon'; </script> statements from multiple components and instead added a single global script import for Iconify in BaseLayout.astro to optimize icon loading and prevent duplicate imports. [1] [2] [3] [4] [5] [6] [7] [8] [9]
• Updated icon sizing and spacing in Button.astro for improved visual alignment and accessibility, and added explicit styling for icon elements within buttons. [1] [2]

Prose and Table Styling Enhancements:

• Adjusted global prose styles in global.css to ensure that buttons and custom tables are not affected by generic prose styles, improving appearance and consistency across light and dark modes. [1] [2] [3] [4]
• Updated Table.astro to use more neutral border and background colors and refined the appearance of table headers, rows, and dividers for better readability. [1] [2]

Component UI and Accessibility Tweaks:

• Improved the appearance and spacing of icons in FeatureCard.astro and adjusted the visual step indicator and line rendering in Step.astro for better clarity and accessibility. [1] [2] [3]
• Enhanced tab button styling and focus states in Tabs.astro for better accessibility and user experience. [1] [2]

Documentation and Content Updates:

• Replaced button-based navigation with simple markdown links in the installation documentation for easier maintenance and improved clarity.

Configuration Adjustments:

• Removed the wrap: true option from the Shiki syntax highlighter configuration in both main and template Astro configs, streamlining code block rendering. [1] [2]

These updates collectively improve the maintainability, accessibility, and visual consistency of the DocuBase UI.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docubase	Ready	Preview, Comment	Feb 5, 2026 5:43pm

[Copilot]

Pull request overview

This pull request introduces a comprehensive UI update to DocuBase, focusing on visual consistency, accessibility, and maintainability improvements. The changes consolidate icon handling by moving to a global CDN import, refine component styling for better visual hierarchy, and enhance prose and table rendering.

Changes:

• Consolidated icon loading by adding a global Iconify script in BaseLayout.astro and removing duplicate imports from 9 components
• Enhanced button styling with improved icon sizing (14px → 18px), explicit styling rules, and prose compatibility
• Refined global prose styles to exclude custom components (buttons and tables) from generic styling using :not() selectors
• Updated component visuals including table borders/backgrounds, feature card spacing, step indicators, and tab hover states
• Replaced button-based navigation with markdown links in installation documentation
• Removed wrap: true from Shiki syntax highlighter configuration

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
template/src/layouts/BaseLayout.astro	Added global Iconify CDN script import
template/src/styles/global.css	Enhanced prose styles with button/table exclusions for better component isolation
template/src/components/Button.astro	Updated icon sizing, added explicit styling, changed to global styles
template/src/components/Table.astro	Refined border colors and header background for better contrast
template/src/components/Step.astro	Improved line height calculation and selector specificity
template/src/components/Tabs.astro	Enhanced hover colors and added background-transparent to inactive state
template/src/components/FeatureCard.astro	Added margin-bottom spacing to icon container
template/src/components/ReadTime.astro	Removed duplicate iconify-icon import
template/src/components/Header.astro	Removed duplicate iconify-icon import
template/src/components/Footer.astro	Removed duplicate iconify-icon import
template/src/components/FlipCard.astro	Removed duplicate iconify-icon import
template/src/components/DocNav.astro	Removed duplicate iconify-icon import
template/src/components/BottomNav.astro	Removed duplicate iconify-icon import
template/src/components/BlogCard.astro	Removed duplicate iconify-icon import
template/src/content/docs/installation/index.mdx	Replaced button components with markdown links for simpler maintenance
template/astro.config.mjs	Removed wrap option from Shiki configuration
astro.config.mjs	Removed wrap option from Shiki configuration
.changeset/green-cups-divide.md	Added changeset for patch version bump

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The CDN script loads iconify-icon version 2.1.0, but the package.json specifies version ^3.0.2. This version mismatch could lead to inconsistent behavior or compatibility issues. Update the CDN URL to use version 3.x to match the package dependency.

Suggested change

	<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js" defer></script>
	<script src="https://code.iconify.design/iconify-icon/3.0.2/iconify-icon.min.js" defer></script>

[Copilot]

The selector change from .btn :global(p) to .btn :is(p) with <style is:global> changes the specificity and behavior. The :is(p) selector is functionally equivalent to just p and targets any p element, while the original .btn :global(p) specifically targeted p elements that are descendants of .btn. Consider using .btn p instead to maintain the original intent of targeting paragraph elements within buttons.

Suggested change

	.btn :is(p) {
	.btn p {

[Copilot]

The new global script tag loads iconify-icon.min.js directly from the third‑party domain code.iconify.design at runtime, giving external code full execution privileges on every page. If that CDN or DNS is compromised, an attacker can inject arbitrary JavaScript to steal session data, modify content, or perform actions as the user. To reduce this supply‑chain risk, serve this script from a locally managed asset (via your bundler) or, at minimum, add an integrity‑checked, version‑pinned asset managed through your own deployment pipeline instead of a live CDN URL.