Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-06 00:07:44 +01:00
Code Issues Projects Releases Wiki Activity
6e4e58aee8
unleash.unleash/frontend/src/component/common/FormTemplate
History
Thomas Heartman e43109a2cb
fix: prevent long names from breaking form layouts (#7591) 
This PR fixes a couple instances where long resource names would break
form and input layouts.

I've added comments to the various files to explain what they're doing
and why.

## Discussion point:

I've now set the width of project selector to be as narrow as it can
with wrapped text. In the main interfaces, it's much better, but on the
page where you can move a flag, it is quite narrow. However, I still
think it's better (no chance of it being wider than the whole screen).
We might want to find another way, but regardless, it'll only show up
with real edge cases.

## Fixes (screenies)

### API token creation form

**Files**:
- `frontend/src/component/common/FormTemplate/FormTemplate.styles.ts`
- `frontend/src/component/common/FormTemplate/FormTemplate.tsx`

Before:

![image](https://github.com/user-attachments/assets/cef31208-2cce-479e-902e-ed7d3c3c9571)

After:

![image](https://github.com/user-attachments/assets/b0832193-11f5-427d-9df1-d9baca0a91e7)


### New feature flag form

**Files**:
- `frontend/src/component/common/GeneralSelect/GeneralSelect.tsx`

Before:

![image](https://github.com/user-attachments/assets/2ac6f791-af19-4f7e-a8ea-2fc356f18fb2)

After:

![image](https://github.com/user-attachments/assets/13b91812-c00a-49e8-9409-67fab4eaaf01)

### Project select popover

**Files**

- `frontend/src/component/common/GeneralSelect/GeneralSelect.tsx`
-
`frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx`

Before:

![image](https://github.com/user-attachments/assets/e81a4cef-1402-4b9c-b1a8-c22493c794bd)

After:

![image](https://github.com/user-attachments/assets/604dada9-6555-48e3-a81d-dda72bd9ccf0)

But also:

![image](https://github.com/user-attachments/assets/7e935fe5-b7f0-4674-8d94-a8c8a6176a3c)
2024-07-16 10:47:46 +02:00
..
FormTemplate.styles.ts fix: prevent long names from breaking form layouts (#7591) 2024-07-16 10:47:46 +02:00
FormTemplate.tsx fix: prevent long names from breaking form layouts (#7591) 2024-07-16 10:47:46 +02:00