Merge pull request 'fix: fixed the Issue with long Names and adapted the count of Entity in a row' (#33) from SomeCSSReworks into main

Reviewed-on: #33

.gitignore

@@ -2,5 +2,7 @@
 bin
 Debug
 /CouchLog/Data/CouchLog.db
+/CouchLog/Data/CouchLog.db-shm
+/CouchLog/Data/CouchLog.db-wal
 #Migrations
 obj

CouchLog/Components/Pages/GlobalList.razor

@@ -43,10 +43,10 @@
                 </div>
                 <div class="mb-3">
                     <label for="Picture" class="form-label">Picture</label>
-                    <InputFile OnChange="@LoadFiles" accept="image/*"/>
+                    <InputFile OnChange="@LoadImage" accept="image/*" />
-                    @if (!string.IsNullOrEmpty(ImagePreviewUrl))
+                    @if (!string.IsNullOrEmpty(ImageString))
                     {
-                        <img src="@ImagePreviewUrl" style="max-width: 256px; max-height: 256px;" />
+                        <img src="@ImageString" style="max-width: 256px; max-height: 256px;" />
                     }
                 </div>
                 <div class="mb-3">
@@ -66,12 +66,12 @@
     <!-- #endregion -->
 
     <!-- #region Show Entitys -->
-    <div class="row">
+    <div class="row g-4">
         @foreach (var Entity in GlobalEntities)
         {
             if (!Entity.IsPrivate || (Entity.IsPrivate && (Entity.CreatorId == AppUser.Id)))
             {
-                <div name="Enity-Container" class="col-12 col-md-6 col-lg-3 mb-4 Entity-Container">
+                <div name="Enity-Container" class="col-6 col-md-4 col-lg-2 col-xl-2 mb-4 Entity-Container">
                     <div name="Entity-Container-Card" class="Entity-Container-Card">
 
                         <div class="Entity-Container-Menu-Button dropdown ms-1">
@@ -151,6 +151,7 @@
     private bool isCollapseNewGlobalEntityOpen = false;
     private int SelectedMediaTypeId;
     private bool isPrivate = false;
+    private string ImageString;
 
     /// <summary>
     /// 
@@ -159,9 +160,9 @@
     /// <exception cref="NotImplementedException"></exception>
     protected override async Task OnInitializedAsync()
     {
-        GlobalEntities = await CouchLogDB.GlobalEntities.OrderByDescending(Entity => Entity.Id).ToListAsync();
+        GlobalEntities = await CouchLogDB.GlobalEntities.OrderByDescending(Entity => Entity.Title).ToListAsync();
         MediaTypes = await CouchLogDB.MediaType.OrderBy(Type => Type.Id).ToListAsync();
-        Genres = await CouchLogDB.Genres.OrderBy(Genre => Genre.Id).ToListAsync();
+        Genres = await CouchLogDB.Genres.OrderBy(Genre => Genre.Name).ToListAsync();
 
         var AuthState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
         User = AuthState.User;
@@ -181,6 +182,19 @@
         UserPrivateEntityIds = TempUserPrivateEntityIds.ToHashSet();
     }
 
+    private async Task LoadImage(InputFileChangeEventArgs e)
+    {
+        Picture = e.File;
+
+        foreach(var file in e.GetMultipleFiles())
+        {
+            using var stream = file.OpenReadStream();
+            using var ms = new MemoryStream();
+            await stream.CopyToAsync(ms);
+            ImageString = $"data:{file.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}";
+        }
+    }
+
     /// <summary>
     /// 
     /// </summary>

CouchLog/Components/Pages/PrivateList.razor

@@ -24,45 +24,44 @@
     <div class="row g-4">
         @foreach (var Entity in PrivateEntities)
         {
-            /*
-            Hier bleiben wir bei col-lg-6 (halbe Bildschirmbreite),
-            wie du es im roten Kasten wolltest.
-            */
             <div class="col-12 col-lg-6 col-xxl-4">
 
                 <div class="card shadow-sm border-0 overflow-hidden private-entity-card">
                     <div class="row g-0 h-100">
 
-                        <!-- BILD: col-auto sorgt dafür, dass sich die Breite nach CSS richtet -->
+                        <!-- Feste Breite für das Bild, kein Umbruch -->
-                        <div class="col-auto img-wrapper">
+                        <div class="col-auto" style="flex: 0 0 auto; min-width: 120px; max-width: 150px;">
                             @if (!string.IsNullOrEmpty(Entity.GlobalEntity?.PicturePath))
                             {
                                 <img src="/@Entity.GlobalEntity.PicturePath"
-                                     class="entity-img"
+                                     class="entity-img w-100 h-100"
+                                     style="object-fit: cover;"
                                      alt="@Entity.GlobalEntity.Title">
                             }
                             else
                             {
-                                <div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted small px-2">
+                                <div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted small">
                                     Kein Bild
                                 </div>
                             }
                         </div>
 
-                        <!-- INFO: 'col' nimmt automatisch den RESTLICHEN Platz ein -->
+                        <!-- Der Rest nimmt den verbleibenden Platz -->
-                        <div class="col">
+                        <div class="col" style="min-width: 0;">
                             <div class="card-body d-flex flex-column h-100 py-2 px-3">
 
-                                <!-- Header -->
+                                <!-- Header mit besserer Text-Behandlung -->
-                                <div class="d-flex justify-content-between align-items-start">
+                                <div class="d-flex justify-content-between align-items-start mb-2">
-                                    <div class="overflow-hidden">
+                                    <div style="min-width: 0; flex: 1;">
-                                        <h5 class="card-title fw-bold mb-0 text-truncate">@Entity.GlobalEntity?.Title</h5>
+                                        <h5 class="card-title fw-bold mb-0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                                            @Entity.GlobalEntity?.Title
+                                        </h5>
                                         <small class="text-muted meta-text">
                                             @Entity.CreationTime.ToShortDateString()
                                         </small>
                                     </div>
 
-                                    <div class="dropdown ms-1">
+                                    <div class="dropdown ms-2" style="flex-shrink: 0;">
                                         <button class="btn btn-link menu-btn" type="button" data-bs-toggle="modal" data-bs-target="#modal-@Entity.Id">
                                             &#8942;
                                         </button>
@@ -79,7 +78,7 @@
                                     }
                                 </select>
 
-                                @if (Entity.GlobalEntity?.MediaType.Name == "Series")
+                                @if (Entity.GlobalEntity?.MediaType.Name == "Series" || Entity.GlobalEntity?.MediaType.Name == "Anime")
                                 {
                                     <select class="form-select" value="@Entity.Season" @onchange="@(e => UpdateSeason(Entity, e.Value))">
                                         @{