view: better spacing for mobile

db/sql_logger.go

@@ -14,8 +14,6 @@ type sqlLogger struct{}
 func (sqlLogger) Log(ctx context.Context, level sqldblogger.Level, msg string, data map[string]interface{}) {
 	var lvl slog.Level
 
-	msg = strings.TrimSpace(msg)
-
 	switch level {
 	case sqldblogger.LevelDebug, sqldblogger.LevelTrace, sqldblogger.LevelInfo:
 		lvl = slog.LevelDebug
@@ -23,5 +21,9 @@ func (sqlLogger) Log(ctx context.Context, level sqldblogger.Level, msg string, d
 		lvl = slog.LevelError
 	}
 
-	log.New(ctx).With("sql", data).Level(lvl).Log(msg)
+	entry := log.New(ctx)
+	if entry.Accept(lvl) {
+		msg = strings.TrimSpace(msg)
+		entry.With("sql", data).Level(lvl).Log(msg)
+	}
 }

pkg/log/log.go

@@ -101,6 +101,10 @@ func New(ctx context.Context) *Entry {
 	return &Entry{ctx: ctx, handler: h, time: time.Now()}
 }
 
+func (entry *Entry) Accept(lvl slog.Level) bool {
+	return entry.handler.Enabled(entry.ctx, lvl)
+}
+
 func (entry *Entry) Caller(caller caller.Caller) *Entry {
 	entry.caller = caller
 	return entry

tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./views/**/*.templ"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xs: "480px",
+      },
+    },
   },
   plugins: [
     require("daisyui"),

views/subredditsview/detailsview/detailsview.templ

@@ -39,7 +39,7 @@ templ DetailsContent(c *views.Context, data Data) {
 				<div class="flex items-center justify-between">
 					<h1>Subreddit { data.Subreddit.Name }</h1>
 				</div>
-				<div class="flex flex-wrap justify-between content-center">
+				<div class="flex flex-wrap justify-center xs:justify-between content-center gap-4">
 					<h2 class="my-auto">
 						Total Images: 
 						{ strconv.FormatInt(data.TotalImages, 10) }

views/subredditsview/subredditsview.templ

@@ -24,7 +24,7 @@ templ SubredditContent(c *views.Context, data Data) {
 				<h3>No Subreddits Found</h3>
 				<p>Click <a class="text-primary" href="/subreddits/add">here</a> to add a new subreddit.</p>
 			} else {
-				<div class="flex justify-between flex-wrap">
+				<div class="flex justify-center sm:justify-between flex-wrap gap-4">
 					<h2 class="my-auto">{ strconv.FormatInt(data.Subreddits.Total, 10) } Subreddits Registered</h2>
 					<a class="btn btn-primary text-base-100 no-underline" href="/subreddits/add">Add Subreddit</a>
 				</div>
@@ -40,31 +40,28 @@ templ SubredditContent(c *views.Context, data Data) {
 }
 
 templ SubredditCard(c *views.Context, data *models.Subreddit) {
-	<div class="not-prose card card-bordered bg-base-100 hover:bg-base-200 shadow-xl w-80 top-0 hover:-top-1 transition-all rounded-none">
+	<a
+		href={ templ.URL(fmt.Sprintf("/subreddits/details/%s", data.Name)) }
+		class="not-prose card card-bordered bg-base-100 hover:bg-base-200 shadow-xl xs:w-80 w-full max-w-full top-0 hover:-top-1 transition-all rounded-none"
+	>
 		if len(data.R.Images) > 0 {
 			<figure class="p-8">
-				<a class="flex content-center" href={ templ.URL(fmt.Sprintf("/subreddits/details/%s", data.Name)) }>
+				<img
-					<img
+					class="object-contain xs:max-w-[16rem] max-h-[16rem]"
-						class="object-contain max-w-[16rem] max-h-[16rem]"
+					src={ fmt.Sprintf("/img/%s", data.R.Images[0].ThumbnailRelativePath) }
-						src={ fmt.Sprintf("/img/%s", data.R.Images[0].ThumbnailRelativePath) }
+					alt={ data.Name }
-						alt={ data.Name }
+				/>
-					/>
-				</a>
 			</figure>
 		} else {
 			<figure class="p-8">
-				<a href={ templ.URL(fmt.Sprintf("/subreddits/details/%s", data.Name)) }>
+				@imagePlaceholder()
-					@imagePlaceholder()
-				</a>
 			</figure>
 		}
 		<div class="card-body">
 			<div class="flex-1"></div>
-			<a href={ templ.URL(fmt.Sprintf("/subreddits/details/%s", data.Name)) }>
+			<p class="text-center my-4 underline text-primary">{ data.Name }</p>
-				<p class="text-center my-4 underline text-primary">{ data.Name }</p>
-			</a>
 		</div>
-	</div>
+	</a>
 }
 
 templ imagePlaceholder() {