wrap items in accounts header

fixes mobile layout.

css/base.css

@@ -448,4 +448,5 @@ a:hover:not(.lang-link):not(.\~urge), a:active:not(.lang-link):not(.\~urge) {
 
 .search {
     max-width: 15rem;
+    min-width: 10rem;
 }

html/admin.html

@@ -396,17 +396,17 @@
             </div>
             <div id="tab-accounts" class="unfocused">
                 <div class="card ~neutral !low accounts mb-1">
-                    <div class="flex-expand">
+                    <div class="flex-expand row">
-                        <div class="flex-row">
+                        <div class="row">
-                            <span class="heading">{{ .strings.accounts }}</span>
+                            <span class="heading mr-1 col">{{ .strings.accounts }}</span>
-                            <input type="search" class="field ~neutral !normal input search ml-1 mr-1" id="accounts-search" placeholder="{{ .strings.search }}">
+                            <input type="search" class="col field ~neutral !normal input search ml-1 mr-1" id="accounts-search" placeholder="{{ .strings.search }}">
                         </div>
-                        <div>
+                        <div class="row">
-                            <span class="button ~neutral !normal mb-half" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
+                            <span class="col button ~neutral !normal mb-half" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
-                            <span class="button ~info !normal mb-half" id="accounts-announce">{{ .strings.announce }}</span>
+                            <span class="col button ~info !normal mb-half" id="accounts-announce">{{ .strings.announce }}</span>
-                            <span class="button ~urge !normal mb-half" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
+                            <span class="col button ~urge !normal mb-half" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
-                            <span class="button ~warning !normal mb-half" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
+                            <span class="col button ~warning !normal mb-half" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
-                            <span class="button ~critical !normal mb-half" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
+                            <span class="col button ~critical !normal mb-half" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
                         </div>
                     </div>
                     <div class="card ~neutral !normal accounts-header table-responsive mt-half">

storage.go

@@ -8,6 +8,7 @@ import (
 	"path/filepath"
 	"strconv"
 	"strings"
+	"sync"
 	"time"
 
 	"github.com/hrfee/jfa-go/mediabrowser"
@@ -25,6 +26,7 @@ type Storage struct {
 	policy                                                                                                                                mediabrowser.Policy
 	configuration                                                                                                                         mediabrowser.Configuration
 	lang                                                                                                                                  Lang
+	invitesLock                                                                                                                           sync.Mutex
 }
 
 type customEmails struct {
@@ -402,10 +404,14 @@ func (st *Storage) loadLangEmail(filesystems ...fs.FS) error {
 type Invites map[string]Invite
 
 func (st *Storage) loadInvites() error {
+	st.invitesLock.Lock()
+	defer st.invitesLock.Unlock()
 	return loadJSON(st.invite_path, &st.invites)
 }
 
 func (st *Storage) storeInvites() error {
+	st.invitesLock.Lock()
+	defer st.invitesLock.Unlock()
 	return storeJSON(st.invite_path, st.invites)
 }