Improve rendering of Inspector

Author: laffra

ltk/ltk.css

@@ -18,25 +18,32 @@
     position: absolute;
     z-index: 100000000;
     background-color: red;
-    width: 2px;
-    height: 2px;
+    width: 3px;
+    height: 3px;
 }
 
 .ltk-highlight-details {
     display: none;
     position: absolute;
     z-index: 100000000;
-    background-color: red;
-    border: 1px solid white;
-    color: white;
+    background-color: pink;
+    border: 3px solid red;
+    color: black;
     padding: 0 8px;
     height: fit-content;
     width: fit-content;
     min-height: 24px;
 }
 
+.ltk-highlight-details tt {
+    color: black;
+    font-weight: bold;
+    border: 1px solid white;
+    padding: 0 4px;
+}
+
 .ltk-highlight-details a {
-    color: white;
+    color: rgb(76, 112, 255)
 }
 
 .ltk-highlight-details ul {

ltk/widgets.py

@@ -59,14 +59,17 @@ def show(self, widget):
             .width(width)
         self.right.css("display", "block").css("left", left + width - 2).css("top", top) \
             .height(height)
-        self.details.css("display", "block").css("left", left + width).css("top", top) \
+        self.details.css("display", "block") \
             .html(f"""
-                A widget of type {widget.__class__.__name__}<ul>
+                An LTK Python widget of class <tt>{widget.__class__.__name__}</tt><ul>
                 <li>{widget.__class__.__doc__.replace("<", "&lt;")}
                 {self.get_attrs(widget)}
                 <li>{self.get_creation_link(widget)}
                 <li>{widget.children().length} children
             """)
+        details_left = max(0, left - self.details.outerWidth() + 2) \
+             if left + width > find("body").width() * 3 / 4 else left + width - 2
+        self.details.css("left", details_left).css("top", top)
 
     def hide(self):
         """ Hide the highlight """
@@ -98,7 +101,7 @@ def get_creation_link(self, widget):
         lineno = caller.f_lineno
         abspath = f"{home}/{filename}"
         url = f"vscode://file:/{abspath}:{lineno}"
-        return f"<a href={url}>{filename}:{lineno}</a>"
+        return f"Created at: <a href={url}>{filename}:{lineno}</a>"
 
     @classmethod
     def get_caller(cls):

pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pyscript-ltk"
-version = "0.2.14"
+version = "0.2.15"
 description = "A little toolkit for writing UIs in PyScript"
 readme = "README.md"
 authors = [{ name = "Chris Laffra", email = "chris@chrislaffra.com" }]