1277 Left Toolbar Text cut off fix (#1319)

## Summary
- Added explicit z-index value to Tooltip in Left Toolbar, to ensure
rendering on top of the map layers.
- Added paragraph to Frontend UI Usability Guideline about usage of
z-index rules.

<!--
Check relevant points but **please do not remove entries**.
-->

## Basics

<!--
These points need to be fulfilled for every PR.
-->

- [ ] The PR is rebased with current master
- [ ] I added a line to [changelog.md](/doc/changelog.md)
- [ ] Details of what I changed are in the commit messages
- [ ] References to issues, e.g. `close #X`, are in the commit messages
and changelog
- [ ] The buildserver is happy

<!--
If you have any troubles fulfilling these criteria, please write about
the trouble as comment in the PR.
We will help you, but we cannot accept PRs that do not fulfill the
basics.
-->

## Checklist

<!--
For documentation fixes, spell checking, and similar none of these
points below need to be checked.
Otherwise please check below points when getting a PR done.
If nothing is to be done, please check them, too.
-->

- [ ] I fully described what my PR does in the documentation
- [ ] I fixed all affected documentation
- [ ] I fixed the introduction tour
- [ ] I wrote migrations in a way that they are compatible with already
present data
- [ ] I fixed all affected decisions
- [ ] I added automated tests or a [manual test
protocol](../doc/tests/manual/protocol.md)
- [ ] I added code comments, logging, and assertions as appropriate
- [ ] I translated all strings visible to the user
- [ ] I mentioned [every code or
binary](https://github.com/ElektraInitiative/PermaplanT/blob/master/.reuse/dep5)
not directly written or done by me in [reuse
syntax](https://reuse.software/)
- [ ] I created left-over issues for things that are still to be done
- [ ] Code is conforming to [our Architecture](/doc/architecture)
- [ ] Code is conforming to [our Guidelines](/doc/guidelines)
- [ ] Code is consistent to [our Design Decisions](/doc/decisions)
- [ ] Exceptions to any guidelines are documented

## First Time Checklist

<!--
These points are only relevant when creating a PR the first time.
-->

- [ ] I have installed and I am using [pre-commit
hooks](../doc/contrib/README.md#Hooks)
- [ ] I am using [Tailwind CSS
Linting](https://tailwindcss.com/blog/introducing-linting-for-tailwindcss-intellisense)

## Review

<!--
Reviewers can copy&check the following to their review.
Also the checklist above can be used.
But also the PR creator should check these points when getting a PR
done:
-->

- [ ] I've tested the code via issue description
- [ ] I've tested the code via requirements
- [ ] I've tested the code with concurrency (several browsers on the
same map)
- [ ] I've read through the code
- [ ] I've read through the documentation
- [ ] I've checked conformity to guidelines
- [ ] I've checked conformity to requirements
- [ ] I've checked that the requirements are automatically tested

doc/changelog.md

@@ -13,8 +13,8 @@ Syntax: `- short text describing the change _(Your Name)_`
 - _()_
 - _()_
 - _()_
-- _()_
-- _()_
+- Fixed warning text from left toolbar being cut by map elements. _(Andrei Dinu)_
+- Added paragraph about z-index usage to Frontend UI Usability Guideline in Docs _(Andrei Dinu)_
 - _()_
 - Add tests for hooks in frontend/layers _(Lukas Anton Lakits)_
 - _()_

doc/guidelines/frontend-ui-usability.md

@@ -180,3 +180,19 @@ Error messages should fulfill following criteria:
 
 E.g.:  
 "Sorry, I **cannot communicate** with my server, there is probably some network problem or the server is down. _Please retry later._"
+
+## Z-Index
+
+For a clean and maintainable layout, z-index should be used sparingly. Isolate z-index control to the **root element** of each component that needs overlapping elements.
+This creates staking contexts within components, preventing z-index conflicts across the application.
+If an element within a component doesn't require special z-index positioning, leave it to the default value of **'auto'**.
+
+List of z-index values currently present in the application, for future reference:
+
+- _BottomStatusPanel_ (inner Component of BaseStage.tsx): 10
+- _Tooltip_ in _PlanningAttributeEditForm_ component: 20
+- _Leaflet_ elements from OpenStreetMap (zoom +/- buttons, citation label on bottom right): 800 (note: pre-defined value coming from the external library used)
+- _Navbar_: 1001 (note: value chosen to be guaranteed "on top" of "Leaflet" elements)
+- _TransparentBackground_ (usage in modals): 1010
+- _ModalContainer_ (usage in modals): 1020
+- _Toast notifications_: 9999 (note: pre-defined value coming from the external library used)

frontend/src/features/map_planning/layers/plant/components/PlantingAttributeEditForm.tsx

@@ -375,7 +375,7 @@ export function MultiplePlantingsDifferentValueAlert() {
         data-tooltip-content={t('plantings:multiple_plantings_different_value_alert')}
         className="mb-3 mt-auto h-5 w-5 flex-shrink-0 text-orange-400"
       />
-      <Tooltip id="multiple-plantings-different-value-alert" />
+      <Tooltip id="multiple-plantings-different-value-alert" className="z-20" />
     </>
   );
 }