From 24ad1d50ace36732f5ceb79f0fe6b95853733f4f Mon Sep 17 00:00:00 2001
From: e01118 <e01118@th-ab.de>
Date: Wed, 29 Nov 2023 14:42:23 +0100
Subject: [PATCH] Changed sizes and view in taxonomy level (MudSelected)

---
 .../Pages/LearningOutcomesForm.razor          | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/LearningOutcomesGenerator/Pages/LearningOutcomesForm.razor b/LearningOutcomesGenerator/Pages/LearningOutcomesForm.razor
index 954ae87..ee07941 100644
--- a/LearningOutcomesGenerator/Pages/LearningOutcomesForm.razor
+++ b/LearningOutcomesGenerator/Pages/LearningOutcomesForm.razor
@@ -1,7 +1,7 @@
 @using System.Text
 @inject ClipBoardService ClipBoardService
 
-<div class="flex flex-col w-[90%] 2xl:w-4/6 mx-auto my-3 min-h-[98%] max-h-[98%] h-[98%] relative border-3 border-adlerdarkblue rounded overflow-hidden bg-gradient-to-br from-adlerbggradientto to-adlergrey-100">
+<div class="flex flex-col w-[98%] 2xl:w-4/6 mx-auto my-3 min-h-[98%] max-h-[98%] h-[98%] relative border-3 border-adlerdarkblue rounded overflow-hidden bg-gradient-to-br from-adlerbggradientto to-adlergrey-100">
     <div class="flex flex-col my-2 mx-4 gap-2">
         <div class="flex flex-row justify-between">
             <MudText Class="cursor-default flex justify-start text-xs text-adlerdarkblue">* Pflichtfeld</MudText>
@@ -22,53 +22,53 @@
                     <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.Info" Class="text-adlergrey hover:text-adlerdarkblue"></MudIcon>
                 </MudTooltip>
             </div>
-            <MudSelect @bind-Value="_selectedTaxonomyLevel" Placeholder="Auswahl der Taxonomiestufe">
+            <MudSelect class="w-40 break-all" @bind-Value="_selectedTaxonomyLevel" Placeholder="Auswahl der Taxonomiestufe">
         
                 <MudSelectItem Value="@_taxonomyLevels[0].ToString()">
-                    <div class="flex flex-row items-center">
-                        <div class="min-w-[15%] text-md break-all font-bold text-adlerblue-500">@_taxonomyLevels[0].ToString()</div>
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="min-w-[15%] text-md break-keep font-bold text-adlerblue-500">@_taxonomyLevels[0].ToString()</div>
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.ArrowRightAlt" Color="Color.Default"></MudIcon>
-                        <span class="pl-1 text-adlergrey text-xs italic break-all"> Auf relevantes Wissen im Langzeitgedächtnis zugreifen </span>
+                        <span title="Auf relevantes Wissen im Langzeitgedächtnis zugreifen" class="max-w-[65%] text-adlergrey text-xs italic break-word"> Auf relevantes Wissen im Langzeitgedächtnis zugreifen</span>
                     </div>
                 </MudSelectItem>
         
                 <MudSelectItem Value="@_taxonomyLevels[1].ToString()">
-                    <div class="flex flex-row items-center">
-                        <div class="min-w-[15%] text-md break-all font-bold text-adlerblue-500">@_taxonomyLevels[1].ToString()</div>
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="min-w-[15%] text-md break-keep font-bold text-adlerblue-500">@_taxonomyLevels[1].ToString()</div>
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.ArrowRightAlt" Color="Color.Default"></MudIcon>
-                        <span class="pl-1 text-adlergrey text-xs italic break-all"> Informationen (mündlich, schriftlich oder grafisch) in der Lerneinheit Bedeutung zuordnen</span>
+                        <span title="Informationen (mündlich, schriftlich oder grafisch) in der Lerneinheit Bedeutung zuordnen" class="max-w-[65%] text-adlergrey text-xs italic break-word"> Informationen (mündlich, schriftlich oder grafisch) in der Lerneinheit Bedeutung zuordnen</span>
                     </div>
                 </MudSelectItem>
         
                 <MudSelectItem Value="@_taxonomyLevels[2].ToString()">
-                    <div class="flex flex-row items-center">
-                        <div class="min-w-[15%] text-md break-all font-bold text-adlerblue-500">@_taxonomyLevels[2].ToString()</div>
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="min-w-[15%] text-md break-keep font-bold text-adlerblue-500">@_taxonomyLevels[2].ToString()</div>
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.ArrowRightAlt" Color="Color.Default"></MudIcon>
-                        <span class="pl-1 text-adlergrey text-xs italic break-all"> Einen Handlungsablauf oder eine Methode in einer bestimmten Situation anwenden</span>
+                        <span title="Einen Handlungsablauf oder eine Methode in einer bestimmten Situation anwenden" class="max-w-[65%] text-adlergrey text-xs italic break-word"> Einen Handlungsablauf oder eine Methode in einer bestimmten Situation anwenden</span>
                     </div>
                 </MudSelectItem>
         
                 <MudSelectItem Value="@_taxonomyLevels[3].ToString()">
-                    <div class="flex flex-row items-center">
-                        <div class="min-w-[15%] text-md break-all font-bold text-adlerblue-500">@_taxonomyLevels[3].ToString()</div>
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="min-w-[15%] text-md break-keep font-bold text-adlerblue-500">@_taxonomyLevels[3].ToString()</div>
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.ArrowRightAlt" Color="Color.Default"></MudIcon>
-                        <span class="pl-1 text-adlergrey text-xs italic break-all"> Lerninhalte in ihre Elemente zerlegen und ihre Verbindung zu einer übergreifenden Struktur oder einem übergreifenden Zweck bestimmen </span>
+                        <span title="Lerninhalte in ihre Elemente zerlegen und ihre Verbindung zu einer übergreifenden Struktur oder einem übergreifenden Zweck bestimmen" class="max-w-[65%] text-adlergrey text-xs italic break-word"> Lerninhalte in ihre Elemente zerlegen und ihre Verbindung zu einer übergreifenden Struktur oder einem übergreifenden Zweck bestimmen</span>
                     </div>
                 </MudSelectItem>
         
                 <MudSelectItem Value="@_taxonomyLevels[4].ToString()">
-                    <div class="flex flex-row items-center">
-                        <div class="min-w-[15%] text-md break-all font-bold text-adlerblue-500">@_taxonomyLevels[4].ToString()</div>
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="min-w-[15%] text-md break-keep font-bold text-adlerblue-500">@_taxonomyLevels[4].ToString()</div>
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.ArrowRightAlt" Color="Color.Default"></MudIcon>
-                        <span class="text-adlergrey text-xs italic break-all"> Urteile aufgrund von Kriterien oder Standards abgeben</span>
+                        <span title="Urteile aufgrund von Kriterien oder Standards abgeben" class="max-w-[65%] text-adlergrey text-xs italic break-word"> Urteile aufgrund von Kriterien oder Standards abgeben</span>
                     </div>
                 </MudSelectItem>
         
                 <MudSelectItem Value="@_taxonomyLevels[5].ToString()">
-                    <div class="flex flex-row items-center">
-                        <div class="min-w-[15%] text-md break-all font-bold text-adlerblue-500">@_taxonomyLevels[5].ToString()</div>
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="min-w-[15%] text-md break-keep font-bold text-adlerblue-500">@_taxonomyLevels[5].ToString()</div>
                         <MudIcon Size="Size.Small" Icon="@Icons.Material.Filled.ArrowRightAlt" Color="Color.Default"></MudIcon>
-                        <span class="text-adlergrey text-xs italic break-all"> Elemente zu einer zusammenhängenden Struktur oder zu einem zusammenhängenden Muster zusammenfügen</span>
+                        <span title="Elemente zu einer zusammenhängenden Struktur oder zu einem zusammenhängenden Muster zusammenfügen" class="max-w-[65%] text-adlergrey text-xs italic break-word"> Elemente zu einer zusammenhängenden Struktur oder zu einem zusammenhängenden Muster zusammenfügen</span>
                     </div> 
                 </MudSelectItem>