Fix styling of friend codes list

accounts/views.py

@@ -5,6 +5,7 @@ from django.shortcuts import redirect, get_object_or_404
 from django.views.generic import ListView, CreateView, DeleteView, View, TemplateView
 from accounts.models import FriendCode
 from accounts.forms import FriendCodeForm
+from django.db.models import Case, When, Value, BooleanField
 
 class ListFriendCodesView(LoginRequiredMixin, ListView):
     """
@@ -15,7 +16,17 @@ class ListFriendCodesView(LoginRequiredMixin, ListView):
     context_object_name = "friend_codes"
 
     def get_queryset(self):
-        return self.request.user.friend_codes.all()
+        # Get the default friend code's primary key if it exists.
+        default_pk = getattr(self.request.user.default_friend_code, "pk", None)
+
+        # Annotate each friend code with is_default=True if its pk matches.
+        return self.request.user.friend_codes.all().annotate(
+            is_default=Case(
+                When(pk=default_pk, then=Value(True)),
+                default=Value(False),
+                output_field=BooleanField()
+            )
+        )
 
 class AddFriendCodeView(LoginRequiredMixin, CreateView):
     """

theme/templates/friend_codes/list_friend_codes.html

@@ -3,27 +3,28 @@
 {% block title %}My Friend Codes{% endblock %}
 
 {% block content %}
-<div class="container mx-auto max-w-xl mt-6">
+<div class="container mx-auto max-w-3xl mt-6">
 <h1 class="text-3xl font-bold mb-4">My Friend Codes</h1>
   
   {% if friend_codes %}
     <ul class="space-y-2">
       {% for code in friend_codes %}
-      <li class="flex flex-col sm:flex-row items-start sm:items-center justify-between {% if user.default_friend_code and code.id == user.default_friend_code.id %}bg-green-200 dark:bg-green-300 dark:text-base-100{% else %}bg-base-100 dark:bg-base-900 dark:text-white{% endif %} p-4 rounded shadow">
+      <li class="w-full grid grid-cols-2 grid-rows-2 md:grid-cols-8 md:grid-rows-1 items-center {% if code.is_default %}bg-green-200 dark:bg-green-300 dark:text-base-100{% else %}bg-base-100 dark:bg-base-900 dark:text-white{% endif %} p-4 rounded shadow">
-        <div class="flex-2">
+        <div class="row-start-1 md:col-span-3">
           <span>{{ code.in_game_name }}</span>
+          {% if code.is_default %}
+            <span class="badge badge-success ml-2">Default</span>
+          {% endif %}
         </div>
-        <div class="flex-3 text-center">
+        <div class="row-start-2 col-start-1 md:row-start-1 md:col-span-3 {% if not code.is_default %}mr-4{% endif %}">
-          <span class="font-mono">{{ code.friend_code }}</span>
+          <span class="font-mono text-sm sm:text-base">{{ code.friend_code }}</span>
         </div>
-        <div class="flex-2 flex items-center space-x-2 self-end">
+        <div class="row-start-2 col-start-2 md:row-start-1 md:col-span-2 flex justify-end space-x-2">
-          {% if user.default_friend_code and not code.id == user.default_friend_code.id %}
+          {% if not code.is_default %}
             <form method="post" action="{% url 'change_default_friend_code' code.id %}">
               {% csrf_token %}
-              <button type="submit" class="btn btn-secondary btn-sm">Set as Default</button>
+              <button type="submit" class="btn btn-secondary btn-sm">Set Default</button>
             </form>
-          {% elif user.default_friend_code and code.id == user.default_friend_code.id %}
-            <span class="badge badge-success ml-2">Default</span>
           {% endif %}
           <a href="{% url 'delete_friend_code' code.id %}" class="btn btn-error btn-sm">Delete</a>
         </div>