Skip to content

Fix heading level on Contact page (T401820) #1025

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix heading level on Contact page (T401820) #1025

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions src/components/Pages/Contact.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<v-main>
<v-responsive max-width="840px" min-width="250px" >
<h1>Get in touch with the team</h1>
<h4 class="page-heading">Get in touch with the team</h4>
Copy link
Member

@outdooracorn outdooracorn Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use the classes that come with Vuetify v2 where possible, rather than defining our own custom classes and CSS that we will have to maintain. See these relevant docs:

<p>Thank you for your interest. We want to hear what you've got to say.</p>
<p>Have you got a question? First, check our <a href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud/FAQ" target="_blank">FAQ</a> to see if we've already answered it. We're constantly updating it with new questions. If you don't find an answer there, feel free to use the contact form below. Thanks!</p>
<p>Please note that despite our best efforts it can take up to two weeks to receive a response. Thank you for your patience.</p>
Expand All @@ -24,7 +24,7 @@
hint="For example: email address, Telegram handle, phone number"
/>
<v-select
:items=items
:items="items"
Copy link
Member

@outdooracorn outdooracorn Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For future reference, please keep changes in a PR focused on a single topic. Unrelated code quality or formatting fixes should be submitted separately, so changes are easier to review and track. As this is a small change and doesn't hinder the review, I'll let it slide!

v-model="subject"
label="What's the main reason for your message?"
:rules="[() => !!subject || 'This field is required']"
Expand Down Expand Up @@ -150,5 +150,19 @@ export default {
}
</script>

<style>
<style scoped>
.page-heading {
/* preserve visual weight of previous h1 — adjust values to match your site's design if needed */
font-size: 28px;
font-weight: 500;
line-height: 1.2;
margin: 0 0 16px;
}

/* small-screen tweak to keep size reasonable on mobile */
@media (max-width: 480px) {
Copy link
Member

@outdooracorn outdooracorn Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this is a requirement UX has asked for, and I've not seen it elsewhere in the code base.

.page-heading {
font-size: 22px;
}
}
</style>