simple-module-settings 0.0.40__tar.gz → 0.0.41__tar.gz

{simple_module_settings-0.0.40 → simple_module_settings-0.0.41}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: simple_module_settings
-Version: 0.0.40
+Version: 0.0.41
 Summary: Runtime settings UI — modules plug their own settings panels into a shared admin view
 Project-URL: Homepage, https://github.com/antosubash/simple_module_python
 Project-URL: Repository, https://github.com/antosubash/simple_module_python
@@ -21,9 +21,9 @@ Classifier: Topic :: Internet :: WWW/HTTP
 Classifier: Topic :: Software Development :: Libraries :: Application Frameworks
 Classifier: Typing :: Typed
 Requires-Python: >=3.12
-Requires-Dist: simple-module-core==0.0.40
-Requires-Dist: simple-module-db==0.0.40
-Requires-Dist: simple-module-hosting==0.0.40
+Requires-Dist: simple-module-core==0.0.41
+Requires-Dist: simple-module-db==0.0.41
+Requires-Dist: simple-module-hosting==0.0.41
 Requires-Dist: typer<0.28,>=0.12
 Description-Content-Type: text/markdown
 

{simple_module_settings-0.0.40 → simple_module_settings-0.0.41}/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-module-py/settings",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "private": true,
   "description": "Frontend assets for the Settings module",
   "peerDependencies": {

{simple_module_settings-0.0.40 → simple_module_settings-0.0.41}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "simple_module_settings"
-version = "0.0.40"
+version = "0.0.41"
 description = "Runtime settings UI — modules plug their own settings panels into a shared admin view"
 readme = "README.md"
 license = "MIT"
@@ -21,9 +21,9 @@ classifiers = [
     "Typing :: Typed",
 ]
 dependencies = [
-    "simple_module_core==0.0.40",
-    "simple_module_db==0.0.40",
-    "simple_module_hosting==0.0.40",
+    "simple_module_core==0.0.41",
+    "simple_module_db==0.0.41",
+    "simple_module_hosting==0.0.41",
     "typer>=0.12,<0.28",
 ]
 

{simple_module_settings-0.0.40 → simple_module_settings-0.0.41}/settings/pages/components/FieldSource.tsx

@@ -55,10 +55,10 @@ export function FieldSource({ field, onReset }: { field: FieldMeta; onReset: ()
   const showDefault = !isBlank(field.default) && String(field.default) !== String(field.value);
   return (
     // Wraps rather than clips: `SM_FILE_STORAGE_QUOTA_BYTES` has no space to
-    // break at, so a 210px column cut it mid-word with nothing to say so.
-    // `break-words` breaks only the tokens that do not fit.
+    // break at, and as an unbreakable token it would set the column's minimum
+    // width; `overflow-wrap:anywhere` lets it break inside the identifier.
     <span
-      className="block break-words font-mono text-[11.5px] leading-snug text-muted-foreground"
+      className="block [overflow-wrap:anywhere] font-mono text-[11.5px] leading-snug text-muted-foreground"
       title={
         field.env_readable
           ? t(keys.settings.modules.env_var_hint)

{simple_module_settings-0.0.40 → simple_module_settings-0.0.41}/settings/pages/components/ModuleFieldRow.tsx

@@ -16,10 +16,11 @@ interface Props {
 /**
  * One settings row: label, control, trailing meta.
  *
- * Three columns rather than a stacked label block, because the trailing column
- * is what makes the screen readable at a glance — every row answers "where is
- * this value from?" in the same place, so the exceptions stand out instead of
- * having to be hunted for.
+ * Three columns when the editor card has room, because the trailing column is
+ * what makes the screen readable at a glance — every row answers "where is
+ * this value from?" in the same place, so the exceptions stand out. The tracks
+ * follow the card's width (container query), not the viewport: two sidebars
+ * can leave a narrow card on a wide screen, and the row stacks instead.
  */
 export function ModuleFieldRow({
   field,
@@ -37,15 +38,14 @@ export function ModuleFieldRow({
   const showDescription = field.description && field.type !== 'bool';
 
   return (
-    // `minmax(170px, auto)`: a fixed 170px track cannot grow, so a long field
-    // name overflowed it and printed straight over the input beside it.
-    <div className="grid gap-3 sm:grid-cols-[minmax(170px,auto)_1fr] lg:grid-cols-[minmax(170px,auto)_1fr_210px] lg:items-center">
+    // Query the editor card: two sidebars can leave little space at a wide viewport.
+    <div className="grid grid-cols-1 gap-3 @md:grid-cols-[minmax(0,140px)_minmax(180px,1fr)] @xl:grid-cols-[minmax(0,140px)_minmax(180px,1fr)_minmax(0,160px)] @xl:items-center">
       <div className="min-w-0">
-        <label htmlFor={id} className="block break-words text-[13px] font-medium">
+        <label htmlFor={id} className="block [overflow-wrap:anywhere] text-[13px] font-medium">
           {field.name}
         </label>
         {showDescription && (
-          <p className="mt-0.5 text-[11.5px] leading-snug text-muted-foreground">
+          <p className="mt-0.5 [overflow-wrap:anywhere] text-[11.5px] leading-snug text-muted-foreground">
             {field.description}
           </p>
         )}
@@ -65,7 +65,7 @@ export function ModuleFieldRow({
         </fieldset>
       </div>
 
-      <div className="sm:col-span-2 lg:col-span-1 lg:justify-self-start">
+      <div className="min-w-0 [overflow-wrap:anywhere] @md:col-span-2 @xl:col-span-1 @xl:justify-self-start">
         <FieldSource field={field} onReset={onReset} />
       </div>
 
@@ -75,7 +75,7 @@ export function ModuleFieldRow({
       {error && (
         <p
           data-testid={`field-error-${field.name}`}
-          className="break-words text-xs text-destructive sm:col-span-1 sm:col-start-2 lg:col-span-2"
+          className="min-w-0 [overflow-wrap:anywhere] text-xs text-destructive @md:col-span-1 @md:col-start-2 @xl:col-span-2"
         >
           {error}
         </p>

{simple_module_settings-0.0.40 → simple_module_settings-0.0.41}/settings/pages/components/ModuleForm.tsx

@@ -134,7 +134,7 @@ export function ModuleForm({ module: m, checks = [] }: Props) {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-4">
+    <div className="flex min-w-0 flex-1 flex-col gap-4">
       {/* Outside the card: the heading names the pane, and the deck keeps the
           card for the fields alone. */}
       <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
@@ -178,7 +178,7 @@ export function ModuleForm({ module: m, checks = [] }: Props) {
         </div>
       )}
 
-      <Card className="flex flex-1 flex-col gap-4 border-border p-6">
+      <Card className="@container flex min-w-0 flex-1 flex-col gap-4 border-border p-6">
         {/* No inner scroller: the card grows and the page scrolls, which is
             one scrollbar for the screen instead of three nested ones. */}
         <div className="flex flex-col gap-4">

{simple_module_settings-0.0.40 → simple_module_settings-0.0.41}/tests-js/ModuleForm.test.tsx

@@ -105,7 +105,7 @@ describe('ModuleForm', () => {
     // control's cell, where it wrapped a word per line.
     const error = screen.getByText(/item rejected/);
     expect(error.contains(screen.getByLabelText('retention_days'))).toBe(false);
-    expect(error.className).toContain('lg:col-span-2');
+    expect(error.className).toContain('@xl:col-span-2');
   });
 
   test('shows an error whose loc names no field at form level', async () => {

simple_module_settings-0.0.41/tests-js/settings_ModuleFieldLayout.test.tsx

@@ -0,0 +1,62 @@
+import { configureI18n } from '@simple-module-py/i18n';
+import { render, screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
+import type { FieldMeta } from '../settings/pages/components/FieldInput';
+import { ModuleFieldRow } from '../settings/pages/components/ModuleFieldRow';
+import { ModuleForm } from '../settings/pages/components/ModuleForm';
+
+configureI18n({ locale: 'en', messages: {} });
+
+const field: FieldMeta = {
+  name: 'very_long_underscore_separated_setting_name',
+  env_var: 'SM_FILE_STORAGE_VERY_LONG_UNDERSCORE_SEPARATED_SETTING_NAME',
+  type: 'string',
+  value: '',
+  default: '',
+  description: '',
+  is_secret: false,
+  requires_restart: false,
+  group: null,
+};
+
+// jsdom has no layout engine: these guard the responsive CSS contract.
+test('the editor card supplies the field rows container width', () => {
+  const { container } = render(
+    <ModuleForm
+      module={{
+        module_name: 'FileStorage',
+        package: 'file_storage',
+        env_prefix: 'SM_FILE_STORAGE_',
+        class_name: 'FileStorageSettings',
+        fields: [field],
+      }}
+    />,
+  );
+  expect(container.querySelector('[data-slot="card"]')).toHaveClass('@container', 'min-w-0');
+});
+
+test('rows bound their tracks and wrap identifiers without viewport breakpoints', () => {
+  const { container } = render(
+    <ModuleFieldRow
+      field={field}
+      package="file_storage"
+      value=""
+      modified={false}
+      error="Invalid setting"
+      onChange={() => {}}
+      onReset={() => {}}
+    />,
+  );
+  const row = container.firstElementChild;
+  expect(row).toHaveClass(
+    'grid-cols-1',
+    '@md:grid-cols-[minmax(0,140px)_minmax(180px,1fr)]',
+    '@xl:grid-cols-[minmax(0,140px)_minmax(180px,1fr)_minmax(0,160px)]',
+  );
+  expect(row?.className).not.toMatch(/(?:^|\s)(?:sm|lg):/);
+  expect(screen.getByText(field.name)).toHaveClass('[overflow-wrap:anywhere]');
+  const source = screen.getByText(field.env_var);
+  expect(source).toHaveClass('[overflow-wrap:anywhere]');
+  expect(source.parentElement).toHaveClass('min-w-0', '@md:col-span-2', '@xl:col-span-1');
+  expect(screen.getByText('Invalid setting')).toHaveClass('@md:col-start-2', '@xl:col-span-2');
+});