From 7746b08c769c1337d5e7552e0d523dcb88a5e1f3 Mon Sep 17 00:00:00 2001
From: 2weiEmu <saalbach.robert@outlook.de>
Date: Sun, 15 Mar 2026 23:19:13 +0100
Subject: [PATCH] update: better styling

---
 public/css/index.css |  15 ++++++++++++++-
 public/index.html    |   2 +-
 public/js/index.js   |   4 ++++
 songmanager          | Bin 10742405 -> 10742405 bytes
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index 76fbc32..facd4cc 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -3,5 +3,18 @@
 }
 
 #editElement {
-	background-color: red;
+}
+
+ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+#editElement {
+	padding: 20px;
+	border-radius: 5px;
+	background-color: #d9d9d9;
+	border: 1px solid gray;
+	box-shadow: 5px 5px 5px 5px #d9d9d9;
 }
diff --git a/public/index.html b/public/index.html
index 4c0f66f..a89956d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,7 +15,7 @@
 			<h2>List of songs in the database:</h2>
 			<p>Filter songs here:</p>
 			<input id="allSongFilterList" type="text"></input>
-			<ul style="max-height: 200px; overflow-y: auto" id="db_status_song_list">
+			<ul style="max-height: 400px; overflow-y: auto" id="db_status_song_list">
 			</ul>
 
 			<h2>Which rooms these songs are applied to</h2>
diff --git a/public/js/index.js b/public/js/index.js
index 3fc8d4f..feaf04c 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -56,6 +56,10 @@ function newSongDisplayWithEdit(song) {
 	let wrap = document.createElement("div")
 	wrap.id = "key=" + song.Key
 	let info = document.createElement("p")
+	info.style.display = "inline-block"
+	info.style.margin = "7px 5px 7px 5px"
+	info.style.padding = "2px 5px 2px 5px"
+	info.style.minWidth = "400px"
 	info.innerText = "(" + song.Key + ") " + song.DisplayTrackName + " by " + song.DisplayArtistNames.replace("~", ", ")
 
 	let but = document.createElement("button")
diff --git a/songmanager b/songmanager
index 68ffd5bfbcbdc07e1b78cc88978b38c32a7712d1..fe6410779e0b77b3a063eaee7f2953037f099e10 100755
GIT binary patch
delta 981
zcmZp@+RqBY8*=#T%|nXK1B)U{($kVcy`r)#QZ33{^|Rbf97C&$!-6fNii3kIa!dmv
z^Yzm$yb7Jt%d*^plY)~nJv|CjO^ozQyq%5A{frV*+{{aJLR`|zqLK_5SQr=>L>L$t
zm>C!t-2Flsp4FYGn0NAma9PzdfnQde6C)pOmDA73OfoakZ+^|+{+ge${WU*R`)hvY
z_SgI@?XUS++h6muwZG<PZ-33t(f*pBv;8$cSNm&z?)KOGJngUfdD~y}^R>U`2k8}P
zf6Xu0{+eH?{WZUE`)huY_SgKP?XUU8+F$dFx4-6>Xn)Nw+5Vbes{J*;bo*<5nfBNG
zvhA<=<=S8K%eTMgS7?9Duh{;YU#a~yzjFI)ewFsu{HpD*`PJHA^Q*VN=GSO{&9B-1
znqRB^HNSTIYkr;f*ZjKeule=bU-Rp?zvee+f6Z^${+i#Y{WZUF`)hua_SgKT?XUUG
z+F$dVx4-7MXn)Ob+5Vc}s{J*;b^B|6oA%fIw(YO^?b=`S+qb{wcW8gj@3{Rnzta~5
z5mO^0LjxmAUDHI1WP{XH1Jh)awC$Z6vV@s6kcHAxOw-H^lhX`L&67=x4NTKglM+n~
zO$^Nv(@du8nK(&unT8k{Ss5Bw8CkXmnmDxwnmD%ynz*zFnz*(Hnz*$Gnz*+Ins~Ga
zns~Mcns~Jbns~Pdn)tK_n)tQ{n)tN`n)tT|ngp~5ngq57ngq26ngq88nuN3mnuN9o
znuN6nnuNCpnnbh*nnbn-nnbk+nnbq;n#8mRn#8sTn#8pSn#8vUnk2Lbnk2Rdnk2Oc
znk2UenxwP`nxwV|nxwS{nxwY}nq;&Gnq+PdG|5t_p@q+<2bwtPw~KAbY8Ts*-7dBz
zr(JAIZoAl)ymqlI`R!s`3fjfC6t;_PDQXwnQrs@KrKDYKOKH2<ma=xSE#>WETPoVc
zwp6x@ZK-M(+fv;wwxy<BY)fss*p|9>u`TuOVp|&8#kMrIi*0FY7u(X@F1DqmU2IEh
zyV#btcCjt(?P6Ox+QqhXwu^1)Y8Ttm-7dDJr(JAIZ@bu*zIL%K{q15~CbWxfnb<D2
zWm3D?mdWj6Tc)&&ZJF9Gwq;to*p}(-Vq0dki*1?NF1BS>yV#c5?P6Qzw2N(-+b*_c
cUc1<q`R!s`7PO0PS=cVNWzlxAEsOKb06J1~6aWAK

delta 981
zcmZp@+RqBY8*=#TEyLWL!_$L9g3Pj=i>nHQ67$0{^$UG7B8#iiA`A@+Qaq!w%{>Y$
zJoVEpyb7Jt%d*^plY)~nJv|CjO^o!za-0h*<AWk9f=x|5sw@n=vJyiWSQr=>L>L$t
zm>C!t-2FlsG!+*ms@&p^Tz}xG?ZquJYG3B`v+L(%CYhP&H^1g@f6dR>{+geu{WU*x
z`)hud_SgKZ?XUUS+F$dtx4-7+Xn)Pm+5VcJtNk@Ucl&F8p7z)LyzQ^~`PyIegY*it
zzvdTgf6Xt{{+eI7{WZTx`)hvD_SgJk?XUU8+h6lbw7=$;Y=6x!)&81ay8Si3O#5qo
z+4k4`a_z7A<=bELE407nS8RXHuhjmUU%CA?ze@XSe%1EZ{A%s5`PJKB^J}!f=GSb0
z&9Bw|nqRy9HNQ^#YkuAK*Zg|zule=cU-KKZzvee=f6Z^y{+i#o{WZTy`)hvF_SgJo
z?XUUG+h6lrw7=%JY=6yf)&82_y8Si3P5Wzp+xFM|cI~hE?b~1TJG8&%cijG(-|35j
zh_RuCk+HFfZi=x%qJg1hYO+a^!S>D#S;EX3$U^2O2Bs!SW=3hIre-My7HNq|#;Hb@
z7G`FqMrqUaOq?XSj6)19tc;AUj7{1DO`O^TO`O{UO<dXoO<dapP2Ac8P2Af9O+4BI
zO+4EJO}yFzO}yI!O?=t|O?=w}P5jyeP5j#fO#<2jO#<5kO@i73O@iA4O+wlOO+woP
zO~Tp(O~Ts)O(NO@O(NR^O`_TZO`_WaO=8*uO=8;vP2$=EP2$@FO%mDzO%mG!O_JIJ
zO_JLKO;XweO;XzfP14!}P14%~O)}a8O)|F!nq;Ze(8A}_15KRt+r_qIwTo@ZZWr5<
z(=N6pw_R*YUc1<q{C2S|1?^&63fslD6t#<ODQ*|rQqnHArL<jaOIf?vmhyJ7Efwuz
zTPoYdwp6u?ZK-Y-+fvgmwxzaRY)f6c*p~Wsu`LblVp|&9#kMrHi*0Fc7u(X(F1Dq$
zU2IERyV#cYcCjrT?P6Ox+r_qYwTo@(ZWr6q(=N89w_R*YU%S|r{&uk~6WYbLOl%k1
zGO1l`%j9;kEmPXXwoGjo+cK?PY|Hd^u`M&&#kS0B7uzzcU2MzjcCjsU+QqiaZ5P`z
cuU%}*{C2S|3);oDENmCsvS_>5mc{vI07o5eg8%>k

-- 
2.54.0