fix (dashboard): Fix announcement layout when title is too short (#3382)

### **User description**
Before:

![image](https://github.com/user-attachments/assets/d8f0404b-fafe-4d30-bb19-f3eeedda31b8)

After:


![image](https://github.com/user-attachments/assets/10dd9986-b461-4466-ae2f-d169f663146b)


___

### **PR Type**
Bug fix, Enhancement


___

### **Description**
- Fixed announcement layout for short titles in AnnouncementsTray.

- Updated announcement list to use hardcoded sample data.

- Improved flexbox styling for announcement items.

- Added a changeset entry for the patch release.


___

### **Changes diagram**

```mermaid
flowchart LR
  AnnouncementsTray["AnnouncementsTray.tsx"]
  Styling["Flexbox layout fix"]
  SampleData["Hardcoded announcements data"]
  Changeset[".changeset/wet-sheep-bake.md"]

  AnnouncementsTray -- "uses" --> SampleData
  AnnouncementsTray -- "applies" --> Styling
  AnnouncementsTray -- "documented in" --> Changeset
```


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>AnnouncementsTray.tsx</strong><dd><code>Fix
announcement layout and use sample data in
AnnouncementsTray</code></dd></summary>
<hr>


dashboard/src/features/orgs/components/members/components/AnnouncementsTray/AnnouncementsTray.tsx

<li>Replaced dynamic announcement fetching with hardcoded sample
data.<br> <li> Fixed flexbox layout for announcement items to handle
short titles.<br> <li> Improved visual alignment and spacing in the
announcement list.


</details>


  </td>
<td><a
href="https://github.com/nhost/nhost/pull/3382/files#diff-88fdcce3e90fa9e4d172858ae702855f86e6ece724ba443d8a6ed918999a1630">+52/-2</a>&nbsp;
&nbsp; </td>

</tr>
</table></td></tr><tr><td><strong>Documentation</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>wet-sheep-bake.md</strong><dd><code>Add changeset for
announcement layout fix</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></summary>
<hr>

.changeset/wet-sheep-bake.md

- Added a changeset entry describing the announcement layout fix.


</details>


  </td>
<td><a
href="https://github.com/nhost/nhost/pull/3382/files#diff-45895b0cd41c7cf29b27780adee81b07c63884cfe2bc7d9fb589e1017bbba61e">+5/-0</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

___

> <details> <summary> Need help?</summary><li>Type <code>/help how to
...</code> in the comments thread for any questions about PR-Agent
usage.</li><li>Check out the <a
href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a>
for more information.</li></details>
This commit is contained in:
robertkasza
2025-07-03 16:38:04 +02:00
committed by GitHub
parent 5fed49e05b
commit 47ab341ce4
3 changed files with 8 additions and 2 deletions

View File

@@ -0,0 +1,5 @@
---
'@nhost/dashboard': patch
---
fix (dashboard): Fix announcement layout when title is too short

View File

@@ -56,11 +56,12 @@ interface CreateOrgFormProps {
}
function CreateOrgForm({ plans, onSubmit, onCancel }: CreateOrgFormProps) {
const proPlan = plans.find(({ name }) => name === 'Pro')!;
const form = useForm<z.infer<typeof createOrgFormSchema>>({
resolver: zodResolver(createOrgFormSchema),
defaultValues: {
name: '',
plan: plans[0].id,
plan: proPlan?.id || '',
},
});

View File

@@ -118,7 +118,7 @@ export default function AnnouncementsTray() {
) : (
<span className="mt-[5px] h-2 w-2 flex-shrink-0" />
)}
<div className="flex flex-row">
<div className="flex w-full flex-row justify-between">
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">
{formatDistance(